scrollbar-gutter

Cú pháp

/* Giá trị khởi tạo */
scrollbar-gutter: auto;

/* Từ khóa "stable", với bộ điều chỉnh tùy chọn */
scrollbar-gutter: stable;
scrollbar-gutter: stable both-edges;

/* Giá trị toàn cục */
scrollbar-gutter: inherit;
scrollbar-gutter: initial;
scrollbar-gutter: revert;
scrollbar-gutter: revert-layer;
scrollbar-gutter: unset;

Giá trị

auto

Giá trị khởi tạo. Thanh cuộn Classic tạo gutter khi overflow là scroll, hoặc khi overflow là auto và hộp đang tràn. Thanh cuộn Overlay không chiếm không gian.

stable

Khi sử dụng thanh cuộn classic, gutter sẽ hiện diện nếu overflow là auto, scroll, hoặc hidden ngay cả khi hộp không tràn. Khi sử dụng thanh cuộn overlay, gutter sẽ không hiện diện.

both-edges

Nếu một gutter sẽ hiện diện trên một trong các cạnh inline start/end của hộp, thì một gutter khác cũng sẽ hiện diện ở cạnh đối diện.

Định nghĩa hình thức

Cú pháp hình thức

scrollbar-gutter = 
  auto                   |
  stable && both-edges?  

Ví dụ

Các ví dụ bên dưới cho thấy cách các giá trị khác nhau của thuộc tính scrollbar-gutter ảnh hưởng đến phần tử div có thể cuộn (.container) với một hoặc nhiều đoạn văn bên trong.

Ví dụ 1

Ngăn các thay đổi bố cục không cần thiết khi nội dung tăng hoặc giảm khiến thanh cuộn xuất hiện/biến mất, một khoảng trống được dành cho nó.

.container {
  scrollbar-gutter: stable;
}

Ví dụ 2

Thêm khoảng cách đối xứng cho cả hai bên của hộp để nội dung được căn giữa:

.container {
  scrollbar-gutter: stable both-edges;
}

Ví dụ 3

Căn chỉnh nội dung của phần tử không cuộn và phần tử cuộn bên cạnh nó: Ví dụ này hiển thị hai div cạnh nhau. Phần tử bên trái không có cuộn, nhưng phần tử bên phải có. Cả hai đều có scrollbar-gutter được áp dụng, cũng dành không gian cho div bên trái không có nội dung có thể cuộn. Đây là một kỹ thuật tốt để giữ chiều rộng nội dung nhất quán.

.container1 {
  overflow: hidden;
  scrollbar-gutter: stable;
}

.container2 {
  scrollbar-gutter: stable;
}

Thanh cuộn Overlay

Để tham khảo, hình ảnh này hiển thị cùng div ở trên, nhưng với cài đặt hệ thống của người dùng được đặt thành thanh cuộn overlay. Lưu ý ở đây thanh cuộn chỉ hiển thị khi người dùng đang cuộn và trên nội dung, vì vậy không có không gian nào được dành cho nó và thuộc tính scrollbar-gutter không có hiệu lực.

Đặc tả

Khả năng tương thích trình duyệt

Xem thêm

• Module CSS overflow
• Module CSS scrollbars styling
• overflow
• scrollbar-width
• scrollbar-color