Cách tạo: Thanh cuộn tùy chỉnh

Học cách sử dụng CSS để tạo thanh cuộn tùy chỉnh.

Cách tạo thanh cuộn tùy chỉnh

Chrome, Edge, Safari và Opera hỗ trợ các pseudo-element không tiêu chuẩn ::-webkit-scrollbar Pseudo-element cho phép chúng ta thay đổi diện mạo của thanh cuộn trình duyệt.

Ví dụ sau tạo ra thanh cuộn có chiều rộng 10px, thanh cuộn có khe/đoạn tiến trình màu xám và cuộn trượt màu xám đậm (#888):

/* Chiều rộng */
::-webkit-scrollbar {
  width: 10px;
}
/* Khe */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}
/* Cuộn trượt */
::-webkit-scrollbar-thumb {
  background: #888;
}
/* Cuộn trượt khi chuột悬停 */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}

Thử ngay

Ví dụ này tạo ra thanh cuộn có hiệu ứng bóng阴影:

Mẫu

/* Chiều rộng */
::-webkit-scrollbar {
  width: 20px;
}
/* Khe */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey;
  border-radius: 10px;
}
/* Cuộn trượt */
::-webkit-scrollbar-thumb {
  background: red;
  border-radius: 10px;
}

Thử ngay

Chọn thanh cuộn

Đối với trình duyệt webkit, bạn có thể sử dụng các pseudo-element sau để tùy chỉnh thanh cuộn của trình duyệt: