Thanh cuộn Scrollbar bạn có thể tùy chính được màu sắc tùy ý theo sở thích của mình như màu sắc, độ to rộng của thanh cuộn và tránh chiếm diện tích quá lớn.
 |
| thanh cuộn màu scrollbar color |
Hướng dẫn tạo cuộn Scrollbar
Bước 1: Các bạn vào mẫu và dán đoạn code bên dưới trên thẻ ]]></b:skin>Bước 2: Các bạn hiện chỉnh lại màu sắc bằng mã màu khác với những đoạn code mình đã tô đậm.
Bước 3: Lưu lại và kiểm tra
/* Webkit override Scrollbar with CSS3 */
::-webkit-scrollbar {
width: 8px; height:8px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 4px rgba(0,0,0,0.3);
background:#fff;
}
::-webkit-scrollbar-thumb {
background: rgba(186,35,35,0.8);
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(186,35,35,0.4);
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
Ý nghĩa của Scrollbar
- ::-webkit-scrollbar 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ử.
Nếu dùng Scrollbar cho 1 đối tượng cuộn khác bạn chỉ cần thêm id/class vào trước nó!
Chúc bạn thành công!
Cái này chỉ có tác dụng trên Chrome hoặc cococ thôi, firefox không tác dụng
Trả lờiXóa