Trình tạo thanh cuộn CSS

Các thuộc tính chuẩn hiện đại (2023 trở đi)

/* Applies to the element that scrolls */
html {
  scrollbar-width: thin;           /* auto | thin | none */
  scrollbar-color: #4f46e5 #e5e7eb; /* thumb track */
}

Hỗ trợ trình duyệt (2024):

• scrollbar-width: Chrome 121+, Safari 18.2+, Firefox 64+.
• scrollbar-color: Chrome 121+, Safari 18.2+, Firefox 64+.
• scrollbar-gutter: stable: Chrome 94+, Safari 14+, Firefox 97+. Dự trữ không gian thanh cuộn ngay cả khi không cần, ngăn hiện tượng dịch chuyển bố cục.

Các phần tử giả của webkit (Chrome, Safari, Edge phiên bản cũ)

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: #e5e7eb;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb {
  background: #4f46e5;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: #3730a3;
}

Kiểm soát chi tiết hơn. width thiết lập chiều rộng thanh cuộn dọc; height thiết lập chiều cao thanh cuộn ngang. Hãy thêm cả hai cho các vùng chứa có thể cuộn theo cả hai hướng.

Xếp lớp hai cách tiếp cận

Hãy chỉ định các quy tắc hiện đại trước, sau đó dùng webkit như một cải tiến cho những trình duyệt hiển thị được cả hai:

.scroll-area {
  scrollbar-width: thin;
  scrollbar-color: #4f46e5 #e5e7eb;
}
.scroll-area::-webkit-scrollbar       { width: 8px; }
.scroll-area::-webkit-scrollbar-track { background: #e5e7eb; }
.scroll-area::-webkit-scrollbar-thumb {
  background: #4f46e5;
  border-radius: 4px;
  border: 2px solid #e5e7eb;
}

Firefox chỉ tuân theo các quy tắc hiện đại scrollbar-*. Chrome và Safari tuân theo các quy tắc webkit (những quy tắc này ghi đè lên quy tắc hiện đại, nên hành vi luôn nhất quán).

scrollbar-gutter ngăn nội dung bị dịch chuyển

Nếu không có rãnh dành riêng, nội dung sẽ bị dồn lại khi thanh cuộn xuất hiện (thường gặp ở các danh sách động). Cách khắc phục:

html { scrollbar-gutter: stable; }
/* or */
html { scrollbar-gutter: stable both-edges; }

Khe thanh cuộn được dành riêng bất kể nội dung có cuộn hay không. both-edges bổ sung một rãnh tương ứng ở phía đối diện để giữ nội dung căn giữa về mặt thị giác.

Ẩn hoàn toàn thanh cuộn

.no-scrollbar {
  scrollbar-width: none;           /* Firefox */
}
.no-scrollbar::-webkit-scrollbar { display: none; }  /* Chrome, Safari */

Hãy cẩn thận: ẩn thanh cuộn sẽ khiến người dùng không nhận ra nội dung có thể cuộn được. Chỉ nên dùng khi có chỉ báo rõ ràng (mũi tên, chấm trang) hoặc khi hành vi cuộn đã hiển nhiên theo ngữ cảnh (băng chuyền ngang, lịch sử trò chuyện).

Lưu ý cho thiết bị di động

Trên iOS và Android, thanh cuộn chỉ xuất hiện trong chốc lát khi cuộn. CSS thanh cuộn tùy chỉnh của bạn vẫn được áp dụng, nhưng người dùng có thể không bao giờ nhìn thấy nó quá một giây. Hãy thiết kế cho phù hợp: đừng đầu tư quá nhiều vào các chi tiết thị giác hiếm khi xuất hiện.

Khả năng tiếp cận

• Độ tương phản: con trượt so với rãnh phải đạt tỷ lệ 3:1 đối với tương phản không phải văn bản (WCAG 1.4.11).
• Chiều rộng: các thanh cuộn mỏng có thể khó nắm bắt bằng chuột, đặc biệt với người dùng bị hạn chế vận động. Chiều rộng bình thường là lựa chọn mặc định an toàn hơn.
• Không bao giờ gỡ bỏ thanh cuộn ở các vùng có thể cuộn mà không cung cấp cách cuộn khác. Người dùng phụ thuộc vào thanh cuộn sẽ bị mắc kẹt.