Overflow và Scrollbar trong CSS

Khi làm việc với bố cục web, có những lúc nội dung bên trong vượt ra khỏi kích thước phần tử chứa nó - ví dụ như đoạn văn quá dài hoặc hình ảnh quá lớn.

Trong những trường hợp đó, CSS cung cấp các thuộc tính như overflow và overscroll-behavior để bạn kiểm soát cách hiển thị và hành vi cuộn nội dung một cách chính xác.

Thuộc tính overflow

overflow dùng để xác định cách trình duyệt xử lý nội dung bị tràn ra ngoài kích thước phần tử cha.

Các giá trị phổ biến

• visible (mặc định): Nội dung tràn ra vẫn hiển thị, không bị ẩn và không có thanh cuộn.

<p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem, quidem
  explicabo, eos in enim cum rerum reiciendis exercitationem aspernatur velit
  architecto!
</p>

<style>
  p {
    width: 150px;
    height: 100px;
    border: 1px solid black;
    overflow: visible;
  }
</style>

• hidden: Phần nội dung vượt giới hạn sẽ bị cắt và ẩn đi.

<p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem, quidem
  explicabo, eos in enim cum rerum reiciendis exercitationem aspernatur velit
  architecto!
</p>

<style>
  p {
    width: 150px;
    height: 100px;
    border: 1px solid black;
    overflow: hidden;
  }
</style>

• scroll: Luôn hiển thị thanh cuộn ngang và dọc, kể cả khi không cần.

<p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem, quidem
  explicabo, eos in enim cum rerum reiciendis exercitationem aspernatur velit
  architecto!
</p>

<style>
  p {
    width: 150px;
    height: 100px;
    border: 1px solid black;
    overflow: scroll;
  }
</style>

• auto: Tự động hiển thị thanh cuộn khi nội dung vượt giới hạn - đây là lựa chọn được dùng phổ biến nhất.

<p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem, quidem
  explicabo, eos in enim cum rerum reiciendis exercitationem aspernatur velit
  architecto!
</p>

<style>
  p {
    width: 150px;
    height: 100px;
    border: 1px solid black;
    overflow: auto;
  }
</style>

Kiểm soát riêng theo từng chiều

Bạn có thể chia nhỏ overflow thành hai hướng riêng biệt:

• overflow-x: kiểm soát tràn theo chiều ngang (horizontal)
• overflow-y: kiểm soát tràn theo chiều dọc (vertical)

.box {
  overflow-x: scroll;
  overflow-y: hidden;
}

Lưu ý, overflow chỉ hoạt động trên phần tử có display: block và được đặt kích thước cụ thể (width, height).

Thuộc tính overscroll-behavior

Khi người dùng cuộn đến rìa của một phần tử có thanh cuộn, hành vi mặc định của trình duyệt là chuyển tiếp thao tác cuộn ra ngoài phần tử (gọi là scroll chaining).

overscroll-behavior cho phép bạn kiểm soát hoặc ngăn chặn hành vi này - đặc biệt hữu ích trong thiết kế modal, sidebar hoặc vùng cuộn độc lập.

<div class="box">Nội dung rất dài... (hãy thử cuộn)</div>

<p>Đây là nội dung bên ngoài phần tử cuộn.</p>

<style>
  .box {
    width: 250px;
    height: 250px;
    margin: 0 auto;
    border: 2px dashed #333;
    overflow: auto;
    overscroll-behavior: contain;
  }
</style>

Khi bạn cuộn đến đáy .box, phần tử cha sẽ không bị cuộn tiếp - vì contain đã ngăn hành vi "tràn cuộn".

Các giá trị của overscroll-behavior

• auto: Hành vi cuộn mặc định (có thể cuộn chuỗi).
• contain: Giới hạn hành vi cuộn trong phần tử, không ảnh hưởng vùng cha.
• none: Ngăn hoàn toàn cuộn chuỗi và hiệu ứng cao su (rubber-band effect).

Hiện nay, các trình duyệt ở điện thoại đã cung cấp hiệu ứng cho phép người dùng refresh lại trang khi cuộn đến cuộn tới đầu trang/cuối trang (chạm tới giới hạn). Đó được gọi là hiệu ứng cao su (tiếng Anh được gọi là Bounce).

Bạn cũng có thể áp dụng riêng cho từng chiều

• overscroll-behavior-x: áp dụng theo chiều ngang.
• overscroll-behavior-y: áp dụng theo chiều dọc.

Kết luận