Cách thực hiện - Thanh cuộn tùy chỉnh
Tìm hiểu cách tạo thanh cuộn tùy chỉnh bằng CSS.
Thanh cuộn tùy chỉnh
Lưu ý: Thanh cuộn tùy chỉnh không được hỗ trợ trong Firefox hoặc Edge, phiên bản 79 trước đó.
Cách tạo thanh cuộn tùy chỉnh
Chrome, Edge, Safari và Opera hỗ trợ phần tử giả ::-webkit-scrollbar
không chuẩn, cho phép chúng tôi sửa đổi giao diện của thanh cuộn của trình duyệt.
Ví dụ sau đây tạo một thanh cuộn mỏng (rộng 10px), có màu rãnh/thanh màu xám và tay cầm màu xám đậm (#888):
Ví dụ
/* width */
::-webkit-scrollbar {
width: 10px;
}
/* Track */
::-webkit-scrollbar-track {
background: #f1f1f1;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #888;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #555;
}
Hãy tự mình thử »Ví dụ này tạo một thanh cuộn có bóng hộp:
Ví dụ
/* width */
::-webkit-scrollbar {
width: 20px;
}
/* Track */
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px
grey;
border-radius: 10px;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: red;
border-radius: 10px;
}
Hãy tự mình thử »Bộ chọn thanh cuộn
Đối với trình duyệt webkit, bạn có thể sử dụng các phần tử giả sau để tùy chỉnh thanh cuộn của trình duyệt:
-
::-webkit-scrollbar
thanh cuộn. -
::-webkit-scrollbar-button
các nút trên thanh cuộn (mũi tên hướng lên và xuống). -
::-webkit-scrollbar-thumb
tay cầm cuộn có thể kéo được. -
::-webkit-scrollbar-track
bản nhạc (thanh tiến trình) của thanh cuộn. -
::-webkit-scrollbar-track-piece
bản nhạc (thanh tiến trình) KHÔNG được tay cầm che phủ. -
::-webkit-scrollbar-corner
góc dưới cùng của thanh cuộn, nơi giao nhau của cả thanh cuộn ngang và dọc. -
::-webkit-resizer
bộ điều khiển thay đổi kích thước có thể kéo xuất hiện ở góc dưới cùng của một số thành phần.