Sử dụng các thuộc tính scrollbar-width
và scrollbar-color
để tạo kiểu cho thanh cuộn.
Giới thiệu
Từ Chrome phiên bản 2, bạn đã có thể tạo kiểu cho thanh cuộn bằng phần tử giả ::-webkit-scrollbar-*
. Phương pháp này hoạt động tốt trong Chrome và Safari, nhưng chưa bao giờ được Nhóm công tác CSS chuẩn hóa.
Những gì được chuẩn hoá là các thuộc tính scrollbar-width
và scrollbar-color
, một phần của Thông số kỹ thuật cấp 1 cho mô-đun tạo kiểu thanh cuộn CSS. Các thuộc tính này được hỗ trợ kể từ Chrome 121.
Thanh cuộn 101
Phân tích thành phần của thanh cuộn
Ở mức tối thiểu, một thanh cuộn bao gồm một bản nhạc và một nút thumb. Kênh là vùng mà ngón tay cái có thể di chuyển. Đường đi biểu thị toàn bộ khoảng cách cuộn. Thumb tượng trưng cho vị trí hiện tại trong khu vực có thể cuộn. Khi bạn cuộn, nút này sẽ di chuyển trong kênh. Nút thumb cũng thường kéo được.
Tuy nhiên, thanh cuộn có thể có nhiều phần hơn là chỉ thumb và track. Ví dụ: một thanh cuộn có thể có một hoặc nhiều nút để tăng hoặc giảm độ lệch cuộn. Các phần tạo nên thanh cuộn là do hệ điều hành cơ bản xác định.
![Hình minh hoạ các thành phần tạo thành một thanh cuộn.](https://developer.chrome.google.cn/static/docs/css-ui/scrollbar-styling/image/scrollbar-props-1.png?authuser=6&hl=vi)
Thanh cuộn kiểu cũ và lớp phủ
Trước khi tìm hiểu cách tạo kiểu cho thanh cuộn, bạn cần hiểu sự khác biệt giữa hai loại thanh cuộn.
Thanh cuộn lớp phủ
Thanh cuộn lớp phủ là các thanh cuộn nổi được hiển thị ở đầu nội dung bên dưới. Các thành phần này không xuất hiện theo mặc định mà chỉ xuất hiện khi bạn chủ động cuộn. Để nội dung bên dưới hiển thị, chúng thường có độ bán trong suốt, nhưng điều đó sẽ tùy thuộc vào hệ điều hành quyết định. Khi bạn tương tác với những đường liên kết này, kích thước của chúng cũng có thể thay đổi.
![Hình minh hoạ một trình duyệt có một thanh cuộn ở lớp phủ.](https://developer.chrome.google.cn/static/docs/css-ui/scrollbar-styling/image/scrollbar-props-2.png?authuser=6&hl=vi)
Thanh cuộn cổ điển
Thanh cuộn cổ điển là thanh cuộn được đặt trong một gán thanh cuộn chuyên dụng. Rãnh của thanh cuộn là khoảng cách giữa cạnh đường viền trong và cạnh khoảng đệm ngoài. Các thanh cuộn này thường mờ (không trong suốt) và chiếm một phần không gian so với nội dung liền kề.
![Hình minh hoạ một trình duyệt có thanh cuộn cũ.](https://developer.chrome.google.cn/static/docs/css-ui/scrollbar-styling/image/scrollbar-props-3.png?authuser=6&hl=vi)
Các thuộc tính scrollbar-color
và scrollbar-width
Cung cấp màu cho thanh cuộn bằng scrollbar-color
Thuộc tính scrollbar-color
cho phép bạn thay đổi bảng phối màu của thanh cuộn. Thuộc tính này chấp nhận hai giá trị <color>
. Giá trị <color>
đầu tiên xác định màu của nút thumb và giá trị thứ hai sẽ là màu dùng cho bản nhạc.
.scroller {
scrollbar-color: hotpink blue;
}
Khi sử dụng thanh cuộn lớp phủ, màu của bản nhạc không có hiệu ứng theo mặc định. Tuy nhiên, khi bạn di chuột lên thanh cuộn, bản nhạc sẽ xuất hiện.
scrollbar-color
Để sử dụng chế độ kết xuất mặc định do hệ điều hành cung cấp, hãy dùng auto
làm giá trị.
Thay đổi kích thước thanh cuộn bằng scrollbar-width
Thuộc tính scrollbar-width
cho phép bạn chọn một thanh cuộn hẹp hơn hoặc thậm chí là ẩn hoàn toàn thanh cuộn mà không ảnh hưởng đến khả năng cuộn.
Các giá trị được chấp nhận là auto
, thin
và none
.
auto
: Chiều rộng của thanh cuộn mặc định do nền tảng cung cấp.thin
: Một biến thể mỏng của thanh cuộn do nền tảng cung cấp, hoặc thanh cuộn tuỳ chỉnh mỏng hơn thanh cuộn mặc định của nền tảng.none
: Ẩn thanh cuộn một cách hiệu quả. Tuy nhiên, phần tử này vẫn có thể cuộn được.
Bạn không thể sử dụng <length>
, chẳng hạn như 16px
làm giá trị cho scrollbar-width
.
.scroller {
scrollbar-width: thin;
}
Khi sử dụng thanh cuộn lớp phủ, ngón cái chỉ được vẽ trong khi bạn đang chủ động cuộn khu vực có thể cuộn.
scrollbar-width
Hỗ trợ các phiên bản trình duyệt cũ hơn
Để phục vụ cho các phiên bản trình duyệt không hỗ trợ scrollbar-color
và scrollbar-width
, bạn có thể sử dụng cả thuộc tính scrollbar-*
và ::-webkit-scrollbar-*
mới.
.scroller {
--scrollbar-color-thumb: hotpink;
--scrollbar-color-track: blue;
--scrollbar-width: thin;
--scrollbar-width-legacy: 10px;
}
/* Modern browsers with `scrollbar-*` support */
@supports (scrollbar-width: auto) {
.scroller {
scrollbar-color: var(--scrollbar-color-thumb) var(--scrollbar-color-track);
scrollbar-width: var(--scrollbar-width);
}
}
/* Legacy browsers with `::-webkit-scrollbar-*` support */
@supports selector(::-webkit-scrollbar) {
.scroller::-webkit-scrollbar-thumb {
background: var(--scrollbar-color-thumb);
}
.scroller::-webkit-scrollbar-track {
background: var(--scrollbar-color-track);
}
.scroller::-webkit-scrollbar {
max-width: var(--scrollbar-width-legacy);
max-height: var(--scrollbar-width-legacy);
}
}
scrollbar-*
với phương án dự phòng là ::-webkit-scrollbar-*
Lưu ý rằng khi bạn đặt width
hoặc height
của ::-webkit-scrollbar
, thanh cuộn lớp phủ sẽ luôn hiển thị, biến thanh này thành thanh cuộn cũ một cách hiệu quả.
Để ảo ảnh, bạn có thể chọn chỉ thay đổi màu sắc khi di chuột lên thanh cuộn.
.scroller::-webkit-scrollbar-thumb {
background: transparent;
}
.scroller::-webkit-scrollbar-track {
background: transparent;
}
.scroller:hover::-webkit-scrollbar-thumb {
background: var(--scrollbar-color-thumb);
}
.scroller:hover::-webkit-scrollbar-track {
background: var(--scrollbar-color-track);
}
.scroller:hover {
--fix: ; /* This custom property invalidates styles on hover, thereby enforcing a style recomputation. This is needed to work around a bug in Safari. */
}
scrollbar-*
với phương án dự phòng là ::-webkit-scrollbar-*
, chỉ áp dụng màu ::-webkit-scrollbar-*
khi di chuột