pseudo-elements
-webkit-scrollbar có 7 pseudo-elements khác nhau dùng để customize scrollbar:
- ::-webkit-scrollbar style cho hình nền của chính thanh cuộn.
- ::-webkit-scrollbar-button các nút định hướng trên thanh cuộn.
- ::-webkit-scrollbar-track không gian trống bên dưới thanh tiến trình.
- ::-webkit-scrollbar-track-piece phần trên cùng của thanh tiến trình không bị che bởi ảnh thumb.
- ::-webkit-scrollbar-thumb phần tử cuộn có thể kéo để thay đổi kích cỡ.
- ::-webkit-scrollbar-corner góc dưới cùng của phần tử cuộn, nơi hai thanh cuộn gặp nhau.
- ::-webkit-resizer chỉnh sửa lại kích thước có thể kéo được xuất hiện phía trên thanh cuộn ở góc dưới cùng của một số phần tử.
pseudo-class selectors
pseudo-class selectors cho phép lựa chọn các phần cụ thể hơn, như khi thanh cuộn ở các trạng thái khác nhau.
- :horizontal áp dụng cho bất kỳ thanh cuộn nào có hướng ngang.
- :vertical áp dụng cho bất kỳ thanh cuộn nào có hướng ngang.
- :decrement áp dụng cho các button và phần theo dõi (track pieces). Nó cho biết liệu button hoặc phần theo dõi (track pieces) có làm giảm vị trí của chế độ xem khi được sử dụng hay không (ví dụ: scroll lên theo chiều dọc, scroll sang trái theo chiều ngang).
- :increment áp dụng cho các button và phần theo dõi (track pieces). Nó cho biết liệu button hoặc phần theo dõi (track pieces) có làm tăng vị trí của chế độ xem khi được sử dụng hay không (ví dụ: scroll xuống theo chiều dọc, scroll sang phải theo chiều ngang).
- :start áp dụng cho button và track pieces. Nó chỉ ra rằng đối tượng có được đặt trước thumb hay không.
- :end áp dụng cho button và track pieces. Nó chỉ ra rằng đối tượng có được đặt sau thumb hay không.
- :double-button áp dụng cho button và track pieces. Nó được sử dụng để phát hiện xem một button có phải là một phần của cặp button nằm cùng nhau ở cùng một đầu của thanh cuộn hay không. Đối với các track pieces, nó cho biết liệu track pieces đó có chứa một cặp nút hay không.
- :single-button áp dụng cho button và track pieces. Nó được sử dụng để phát hiện xem một button có nằm ở cuối thanh cuộn hay không. Đối với các track pieces, nó cho biết liệu track pieces đó có chứa một button singleton hay không.
- :no-button áp dụng cho các track pieces và cho biết liệu track pieces có chạy đến cạnh của thanh cuộn hay không, tức là không có nút nào ở cuối track pieces đó.
- :corner-present áp dụng cho tất cả các phần của thanh cuộn và cho biết có scrollbar corner hay không.
- :window-inactive áp dụng cho tất cả các phần của thanh cuộn và cho biết cửa sổ chứa thanh cuộn hiện đang hoạt động hay không.
Sử dụng pseudo elements và pseudo class cùng với nhau
::-webkit-scrollbar-track-piece:start {
/* Select the top half (or left half) or scrollbar track individually */
}
::-webkit-scrollbar-thumb:window-inactive {
/* Select the thumb when the browser window isn't in focus */
}
::-webkit-scrollbar-button:horizontal:decrement:hover {
/* Select the down or left scroll button when it's being hovered by the mouse */
}Ví dụ
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}