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 trước 79.
Cách tạo thanh cuộn tùy chỉnh
Chrome, Edge, Safari và Opera hỗ trợ ::-webkit-scrollbar
phần tử giả 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 tạo 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):
Thí 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;
}
Ví dụ này tạo một thanh cuộn với bóng hộp:
Thí 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;
}
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 trỏ lên và xuống).::-webkit-scrollbar-thumb
tay cầm cuộn có thể kéo được.::-webkit-scrollbar-track
theo dõi (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 che bởi tay cầm.::-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
đ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ố phần tử.