Tạo thanh cuộn màu scrollbar color toàn trang web

Tạo thanh cuộn Scrollbar sẽ giúp website của bạn có thanh cuộn cùng với màu sắc chủ đạo để tăng mức độ đồng bộ cho website giúp nhận diện website dễ dàng hơn thay vì sử dụng thanh cuộn mặc định.
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
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

  1. ::-webkit-scrollbar hình nền của chính thanh cuộn đó.
  2. ::-webkit-scrollbar-button các nút định hướng trên thanh cuộn.
  3. ::-webkit-scrollbar-track không gian trống bên dưới thanh tiến trình.
  4. ::-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.
  5. ::-webkit-scrollbar-thumb phần tử cuộn có thể kéo để thay đổi kích cỡ.
  6. ::-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.
  7. ::-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!
    Xếp theo

    1. 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

    Đóng góp bằng cách để lại nhận xét của bạn!