Hướng dẫn thay đổi style cho phần scrollbar trong website

[Hoàng Anh]

:IF:​

Chào mọi người, khi làm web, giao diện sẽ rất là quan trọng vì là thứ đầu tiên đập vào mắt người nhìn, và hôm này tôi cũng sẽ chia sẽ với các bạn một số thủ thuật nhỏ để tạo nên thanh scrollbar đẹp mắt nhằm trang trí thêm hiệu ứng cho website, bạn chỉ cần một số kiến thức về css là có thể làm được.

:tt:​

Bước 1: Ta sử dụng các thuộc tính sau:

• ::-webkit-scrollbar : Ở phần này ta chỉ cần thiết lập chiều rộng của thanh scroll bar
• ::-webkit-scrollbar-track : Ở phần ta sẽ style cho thanh "track", là thanh cố đinh của trình duyệt (thanh màu trắng cố định)
• ::-webkit-scrollbar-thumb : Phần này chính là phần khi ta kéo thanh cuộn thì nó cũng kéo đi theo (thanh màu xám)

Một vài hiệu ứng khác:

• ::-webkit-scrollbar-thumb:hover : Là hiệu ứng khi ta di chuột vào
• ::-webkit-scrollbar-thumb:active : Là hiệu ứng khi click chuột vào

Bước 2: Bây giờ ta đã có các thành phần cơ bản của scroll, giờ ta thử tạo ví dụ để hiểu thêm chi tiết

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background-color: #fff;
}

::-webkit-scrollbar-thumb {
  background-color: #07b;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #ccc;
}

::-webkit-scrollbar-thumb:active {
    background-color: #ccc;
}

Ở ví dụ trên, ta sẽ có một thanh cuộn với màu #07b (xanh) và thanh track thì màu trắng. Khi di chuột và click vào thanh cuộn sẽ có màu #ccc (xám).

Tham khảo thêm hiệu ứng tại đây.

Chúc các bạn thành công!​