Hướng dẫn chi tiết cách tùy chỉnh thanh cuộn (Scrollbar) bằng CSS

Thanh cuộn (Scrollbar) mặc định của trình duyệt thường có giao diện đơn điệu và không đồng bộ với phong cách thiết kế tổng thể của trang web. Việc tùy chỉnh thanh cuộn bằng CSS giúp cải thiện giao diện người dùng (UI) và tạo trải nghiệm đọc chuyên nghiệp hơn.

Bài viết này sẽ hướng dẫn bạn cách tùy chỉnh thanh cuộn bằng hai phương pháp: CSS Scrollbars Standard (tiêu chuẩn W3C mới) và WebKit Pseudo-elements (dành cho Chrome, Safari, Edge).

1. Sử dụng CSS Scrollbars Standard (Tiêu chuẩn W3C)

Tiêu chuẩn CSS Scrollbars hiện đại cung cấp phương pháp gọn nhẹ để thay đổi thanh cuộn trên các trình duyệt hỗ trợ (như Firefox):

• scrollbar-width: Điều chỉnh độ rộng thanh cuộn. Các giá trị gồm auto (mặc định), thin (mỏng), hoặc none (ẩn thanh cuộn).
• scrollbar-color: Tùy chỉnh màu sắc theo cú pháp <màu-thumb> <màu-track>.

Ví dụ:

.custom-scroll {
  scrollbar-width: thin;
  scrollbar-color: #3b82f6 #f3f4f6;
}

2. Sử dụng WebKit Pseudo-elements (Cho Chrome, Safari, Edge)

Đối với các trình duyệt dựa trên nhân WebKit/Blink, bạn có thể can thiệp sâu vào từng thành phần của thanh cuộn thông qua các pseudo-element:

• ::-webkit-scrollbar: Tùy chỉnh kích thước tổng thể của thanh cuộn.
• ::-webkit-scrollbar-track: Tùy chỉnh phần đường rãnh chứa con trượt.
• ::-webkit-scrollbar-thumb: Tùy chỉnh con trượt (phần người dùng kéo).
• ::-webkit-scrollbar-thumb:hover: Hiệu ứng khi di chuột vào con trượt.

Ví dụ:

/* Kích thước thanh cuộn */
::-webkit-scrollbar {
  width: 10px;
}

/* Đường rãnh */
::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 5px;
}

/* Con trượt */
::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 5px;
}

/* Đổi màu con trượt khi rê chuột */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}

3. Giải pháp tương thích đa trình duyệt (Cross-browser)

Để đảm bảo thanh cuộn hiển thị đẹp mắt trên hầu hết các trình duyệt phổ biến, bạn nên kết hợp cả hai phương pháp trên trong cùng một đoạn mã CSS.

Đoạn mã hoàn chỉnh:

/* Tùy chỉnh cho Firefox */
html {
  scrollbar-width: thin;
  scrollbar-color: #2563eb #e5e7eb;
}

/* Tùy chỉnh cho Chrome, Safari, Edge */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #e5e7eb;
}

::-webkit-scrollbar-thumb {
  background: #2563eb;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #1d4ed8;
}

4. Những lưu ý quan trọng khi thiết kế thanh cuộn

• Đảm bảo độ tương phản: Màu của con trượt (thumb) cần đủ nổi bật so với đường rãnh (track) và nền trang web để người dùng dễ nhận biết.
• Kích thước hợp lý: Không nên làm thanh cuộn quá mỏng (dưới 6px) vì sẽ gây khó khăn cho người dùng khi thao tác bằng chuột.
• Lưu ý trên thiết bị di động: Hầu hết các hệ điều hành di động sẽ tự động ẩn thanh cuộn khi không sử dụng. Bạn nên hạn chế can thiệp thanh cuộn trên giao diện mobile để tránh gây xung đột thao tác vuốt.

Ngày phát hành: 08/06/2026
Nguồn: www.digitalocean.com