scrollbar-color
Baseline
2025
Newly available
Since December 2025, 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-color CSS đặt màu của track và thumb của thanh cuộn.
Track là phần nền của thanh cuộn, thường cố định bất kể vị trí cuộn.
Thumb là phần di chuyển của thanh cuộn, thường nổi trên track.
Khi giá trị scrollbar-color được đặt trên phần tử gốc của tài liệu, các giá trị sẽ được áp dụng cho thanh cuộn của viewport.
Cú pháp
/* Giá trị từ khóa */
scrollbar-color: auto;
/* Giá trị <color> */
scrollbar-color: rebeccapurple green; /* Hai màu hợp lệ.
Màu đầu tiên áp dụng cho thumb của thanh cuộn, màu thứ hai cho track. */
/* Giá trị toàn cục */
scrollbar-color: inherit;
scrollbar-color: initial;
scrollbar-color: revert;
scrollbar-color: revert-layer;
scrollbar-color: unset;
Giá trị
<scrollbar-color>-
Định nghĩa màu của thanh cuộn.
autoHiển thị nền tảng mặc định cho phần track của thanh cuộn, khi không có thuộc tính màu thanh cuộn nào khác liên quan. <color> <color>Áp dụng màu đầu tiên cho thumb của thanh cuộn, màu thứ hai cho track của thanh cuộn.
Note:
@media (forced-colors: active) đặt scrollbar-color thành auto.
Khả năng tiếp cận
Khi sử dụng thuộc tính scrollbar-color với các giá trị màu cụ thể, tác giả nên đảm bảo các màu được chỉ định có đủ độ tương phản giữa chúng. Đối với các giá trị từ khóa, UA nên đảm bảo các màu họ sử dụng có đủ độ tương phản. Xem Techniques for WCAG 2.0: G183: Using a contrast ratio of 3:1.
Định nghĩa hình thức
| Initial value | auto |
|---|---|
| Applies to | scrolling boxes |
| Inherited | yes |
| Computed value | as specified |
| Animation type | by computed value type |
Cú pháp hình thức
scrollbar-color =
auto |
<color>{2}
Ví dụ
Tô màu thanh cuộn tràn
CSS
.scroller {
width: 300px;
height: 100px;
overflow-y: scroll;
scrollbar-color: #000077 #bada55;
}
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-color |