CSS Overflow

Summary

overflow - Control behavior khi phần tử con chiếm nhiều space hơn phần tử ch.
Một số value chính: auto, clip, scroll, hidden, visible

Overflow

Control khi độ dài/ size của phần tử con vượt qua phần tử cha thì sẽ hiển thị nó như thế nào.

Các giá trị có thể có của overflow

overflow: visible - default
overflow: hidden - Content dài quá sẽ bị ẩn
overflow: scroll - scroll
overflow: clip - Giống với hidden, nhưng clilp cấm tất cả các loại scroll.
overflow: auto - Thường hay được sử dụng: Hidden by default, give responsibility for scrolling to user and browser.

Single line overflow with text-overflow

text-overflow: ellipsis; - Text tràn thì dùng dấu ba chấm thay cho đoạn bị che :v

Scrolling on the vertical and horizontal axis

.parent {
  overflow-x: scroll;
  overflow-y: scroll;
}
 
/* Shorthand */
overflow: hidden scroll;

Scrollbar position within the box model

Nội dung sẽ tùy thuộc vào box-sizing
- content-box - Scrollbar xuất hiện trong phần content, làm không gian dành cho nội dung.
- border-box - Scrollbar nằm trong phần content, kích thưởng tổng thể của hộp vẫn giữ nguyên. Kích thước nội dung sẽ thu nhỏ lại để vừa với thanh cuộn
- Overlay scrollbar: trong 1 số trình duyệt, scrollbar sẽ đè lên nội dung mà k làm thay đổi diện tích nội dung.
Nếu xh thì nó sẽ nằm trong padding

root-scroller vs implicit scroller

root-scroller: Thanh cuộn của trình duyệt, full page
implicit scroller: Thanh cuộn của phần tử riêng biệt

scroll-behavior

scroll-behavior cho phép chúng ta control việc scroll tới phần tử nào đó. .scrollTo hoặc link

overscroll-behavior

overscroll-behavior - Control việc scroll quá sang phần tử cha bên ngoài. Nếu cuộn hết scroll của phần tử con rồi thì action sẽ là gì? Cuộn tiếp hay như nào?