scrollbar-width
Baseline
2024
Newly available
Since December 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
Thuộc tính scrollbar-width cho phép tác giả đặt độ dày mong muốn của thanh cuộn của một phần tử khi chúng được hiển thị.
Mục đích của scrollbar-width là tối ưu hóa không gian chiếm bởi thanh cuộn trên trang hoặc phần tử; mục đích không liên quan đến thẩm mỹ của thanh cuộn. Các giá trị từ khóa được định sẵn của scrollbar-width chỉ ra cho user agent xem nên hiển thị thanh cuộn bình thường hay nhỏ hơn. Tránh sử dụng none, vì ẩn thanh cuộn ảnh hưởng tiêu cực đến khả năng tiếp cận.
Note:
Đối với các phần tử chỉ có thể cuộn qua phương tiện lập trình chứ không phải tương tác trực tiếp của người dùng, hãy sử dụng thuộc tính overflow với giá trị hidden thay vì scrollbar-width: none.
Cú pháp
/* Giá trị từ khóa */
scrollbar-width: auto;
scrollbar-width: thin;
scrollbar-width: none;
/* Giá trị toàn cục */
scrollbar-width: inherit;
scrollbar-width: initial;
scrollbar-width: revert;
scrollbar-width: revert-layer;
scrollbar-width: unset;
Giá trị
auto-
Độ rộng thanh cuộn mặc định của nền tảng.
thin-
Biến thể độ rộng thanh cuộn mỏng trên các nền tảng cung cấp tùy chọn đó, hoặc thanh cuộn mỏng hơn độ rộng thanh cuộn nền tảng mặc định.
none-
Không hiển thị thanh cuộn, tuy nhiên phần tử vẫn có thể cuộn.
Note:
User Agent phải áp dụng bất kỳ giá trị scrollbar-width nào được đặt trên phần tử gốc cho viewport.
Khả năng tiếp cận
Sử dụng thuộc tính này một cách thận trọng — đặt scrollbar-width thành thin hoặc none có thể làm cho nội dung khó hoặc không thể cuộn nếu tác giả không cung cấp cơ chế cuộn thay thế. Trong khi cử chỉ vuốt hoặc con lăn chuột có thể cho phép cuộn trên nội dung như vậy, một số thiết bị không có cách cuộn thay thế.
Tiêu chí WCAG 2.1.1 (Keyboard) đã tồn tại từ lâu để tư vấn về khả năng tiếp cận bàn phím cơ bản, và điều này nên bao gồm cuộn các vùng nội dung. Và được giới thiệu trong WCAG 2.1, tiêu chí 2.5.5 (Target Size) khuyến nghị các mục tiêu cảm ứng phải có chiều rộng và chiều cao ít nhất 44px (mặc dù vấn đề phức tạp hơn trên màn hình độ phân giải cao; khuyến nghị kiểm tra kỹ lưỡng).
Định nghĩa hình thức
| Initial value | auto |
|---|---|
| Applies to | scrolling boxes |
| Inherited | no |
| Computed value | as specified |
| Animation type | discrete |
Cú pháp hình thức
scrollbar-width =
auto |
thin |
none
Ví dụ
Điều chỉnh kích thước thanh cuộn tràn
CSS
.scroller {
width: 300px;
height: 100px;
overflow-y: scroll;
scrollbar-width: thin;
}
HTML
<div class="scroller">
Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo beet greens
corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts
fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber
earthnut pea peanut soko zucchini.
</div>
Kết quả
Đặc tả
| Specification |
|---|
| CSS Scrollbars Styling Module Level 1 # scrollbar-width |