Custom scrollbar CSS: tùy biến thanh cuộn đúng cách cho từng trình duyệt
Thanh cuộn xám mặc định thường lạc tông trong giao diện tối hoặc trong khung chat, bảng giá có màu thương hiệu. Tùy biến thanh cuộn bằng CSS hiện có hai bộ thuộc tính: chuẩn mới scrollbar-color, scrollbar-width và bộ ::-webkit-scrollbar lâu đời, và hai bộ này tác động lẫn nhau. Công cụ custom scrollbar CSS này sinh cả hai, cho bạn chọn cách kết hợp, xem thử trên trình duyệt đang dùng và giải thích trình duyệt nào áp phần nào.
Tính năng nổi bật
- Sinh cả thuộc tính chuẩn scrollbar-width, scrollbar-color lẫn các luật ::-webkit-scrollbar, -track, -thumb, -thumb:hover, -corner
- Hai cách kết hợp: ưu tiên chuẩn (::-webkit-scrollbar chỉ làm dự phòng) hoặc giữ bo góc và hover trên Chrome, Edge, Safari bằng @supports not selector(::-webkit-scrollbar)
- Áp cho toàn trang hoặc cho một class cụ thể, công cụ kiểm tra tên class hợp lệ
- Chỉnh màu thumb, màu thumb khi rê chuột, màu rãnh, độ rộng 2 đến 24px, bo góc, khoảng hở giữa thumb và mép rãnh
- Tùy chọn ẩn hẳn thanh cuộn mà vẫn cuộn được, tùy chọn scrollbar-gutter: stable để bố cục không bị xô
- Khung xem thử cuộn được cả dọc lẫn ngang, chạy đúng đoạn CSS sẽ sao chép, kèm dòng giải thích trình duyệt của bạn đang dùng bộ thuộc tính nào
- Năm mẫu có sẵn: sáng tối giản, tối, mảnh, thương hiệu xanh, vuông cổ điển
- Sao chép CSS, HTML mẫu và dòng lớp Tailwind dạng arbitrary property bằng các nút riêng
Vì sao tùy biến thanh cuộn hay bị sai
Phần lớn hướng dẫn cũ chỉ dạy ::-webkit-scrollbar, bộ thuộc tính không chuẩn chỉ có trên các trình duyệt nhân Chromium và Safari, còn Firefox thì bỏ qua. Ngược lại, nhiều người thêm scrollbar-color cho Firefox rồi ngạc nhiên vì thanh cuộn trên Chrome mất bo góc. Lý do là từ Chrome 121, Chrome hỗ trợ scrollbar-color và scrollbar-width, và theo tài liệu MDN, khi một phần tử có scrollbar-color hoặc scrollbar-width khác auto, trình duyệt bỏ qua ::-webkit-scrollbar trên phần tử đó. Công cụ này nói rõ tác động đó, cho bạn chọn cách kết hợp phù hợp và cho xem kết quả thật trên trình duyệt bạn đang mở.
Lợi ích khi sử dụng
- Thanh cuộn hợp màu giao diện trên mọi trình duyệt hiện đại
- Hiểu rõ vì sao Chrome bỏ qua ::-webkit-scrollbar khi có thuộc tính chuẩn
- Chọn được giữa đơn giản lâu dài và kiểm soát chi tiết
- Xem kết quả thật ngay trên trình duyệt đang dùng
- Có tùy chọn ẩn thanh cuộn và giữ chỗ chống xô bố cục
- Chạy hoàn toàn trên trình duyệt, không cần đăng nhập
Cách tạo thanh cuộn tùy chỉnh
- 1Chọn phạm vi: Chọn Toàn trang nếu muốn đổi mọi thanh cuộn, hoặc Một class cụ thể và nhập tên class cho khung chat, bảng, menu.
- 2Chọn cách kết hợp: Ưu tiên chuẩn nếu chỉ cần đổi màu và muốn theo hướng lâu dài, Giữ bo góc và hover nếu cần thanh cuộn bo tròn, độ rộng chính xác trên Chrome, Edge, Safari.
- 3Chỉnh màu và kích thước: Chọn màu thumb, màu khi rê chuột, màu rãnh, độ rộng, bo góc, khoảng hở. Chọn scrollbar-width là thin hoặc auto cho phần chuẩn.
- 4Xem thử: Cuộn khung xem thử cả dọc lẫn ngang và đọc dòng giải thích bên dưới để biết trình duyệt của bạn đang áp phần nào.
- 5Sao chép mã: Bấm Sao chép CSS, dán vào file CSS chung; nếu áp theo class, thêm class đó cùng overflow: auto cho khung cần cuộn.
Hai bộ thuộc tính: chuẩn và ::-webkit-scrollbar
Bộ chuẩn thuộc đặc tả CSS Scrollbars gồm hai thuộc tính. scrollbar-color nhận hai màu, màu đầu cho thumb (phần kéo được), màu sau cho rãnh. scrollbar-width nhận một trong ba giá trị auto, thin hoặc none, không nhận số pixel. Bộ này đơn giản, không có bo góc, không có màu riêng khi rê chuột. Bộ ::-webkit-scrollbar là các giả phần tử không chuẩn: ::-webkit-scrollbar cho cả thanh, ::-webkit-scrollbar-track cho rãnh, ::-webkit-scrollbar-thumb cho phần kéo, cùng -corner cho góc giao giữa thanh dọc và ngang. Vì mỗi phần là một hộp riêng, bạn đặt được độ rộng bằng pixel, bo góc, viền, màu khi rê chuột. Firefox không hỗ trợ bộ này.
Trình duyệt nào hỗ trợ gì
Firefox hỗ trợ scrollbar-color và scrollbar-width từ lâu và không hỗ trợ ::-webkit-scrollbar. Chrome và Edge hỗ trợ ::-webkit-scrollbar từ lâu và hỗ trợ thêm hai thuộc tính chuẩn từ phiên bản 121. Safari hỗ trợ ::-webkit-scrollbar, và theo bảng tương thích trong tài liệu của Chrome, Safari hỗ trợ bộ thuộc tính chuẩn từ phiên bản 26.2. Điểm quan trọng nhất, được MDN ghi rõ: trên trình duyệt hỗ trợ cả hai bộ, nếu giá trị tính toán của scrollbar-color hoặc scrollbar-width trên một phần tử khác auto, các luật ::-webkit-scrollbar của phần tử đó bị bỏ qua. scrollbar-color còn được kế thừa, nên đặt nó trên html cũng làm mất ::-webkit-scrollbar của mọi vùng cuộn con, trừ khi vùng đó đặt lại scrollbar-color: auto. Bảng hỗ trợ có thể thay đổi theo thời gian, hãy kiểm tra lại trên MDN hoặc caniuse khi cần chắc chắn.
Cách 1: ưu tiên chuẩn
Mã khai báo scrollbar-width và scrollbar-color trước, sau đó là các luật ::-webkit-scrollbar làm dự phòng. Firefox, Chrome và Edge từ 121, Safari từ 26.2 dùng phần chuẩn và bỏ qua phần webkit, nên thanh cuộn chỉ đổi màu và mảnh đi nếu chọn thin. Trình duyệt cũ chưa hiểu thuộc tính chuẩn dùng phần webkit, có đủ bo góc, độ rộng và hover. Tài liệu của Chrome cũng khuyên khai báo cả hai bộ để phục vụ trình duyệt cũ, và cách này ít rủi ro nhất về lâu dài vì dựa trên chuẩn. Nhược điểm là trên trình duyệt mới, bạn mất bo góc, độ rộng tính bằng pixel và màu khi rê chuột.
Cách 2: giữ bo góc và hover
Mã đặt các luật ::-webkit-scrollbar bình thường, còn hai thuộc tính chuẩn được bọc trong @supports not selector(::-webkit-scrollbar), tức chỉ áp dụng ở trình duyệt không nhận giả phần tử này, thực tế hiện nay là Firefox. Chrome, Edge, Safari không nhận thuộc tính chuẩn nên vẫn dùng đầy đủ phần webkit với bo góc, độ rộng chính xác và hover. Cách này cho kiểm soát chi tiết hơn nhưng dựa trên bộ thuộc tính không chuẩn. Nếu sau này một trình duyệt ngừng hỗ trợ ::-webkit-scrollbar, điều kiện @supports sẽ đúng và trình duyệt đó tự chuyển sang dùng thuộc tính chuẩn, nên thanh cuộn vẫn có màu chứ không quay về mặc định.
Toàn trang hay một vùng cụ thể
Chế độ Toàn trang đặt thuộc tính chuẩn trên thẻ html và dùng ::-webkit-scrollbar không kèm bộ chọn, nghĩa là áp cho mọi phần tử cuộn được trên trang, kể cả ô nhập nhiều dòng và bảng có thanh cuộn ngang. scrollbar-color được kế thừa nên cũng lan xuống mọi vùng cuộn, còn scrollbar-width không kế thừa nên chỉ đổi thanh cuộn chính của trang. Chế độ class chỉ tác động lên phần tử có class đó, hợp khi bạn chỉ muốn làm đẹp khung chat, danh sách thả xuống hay thanh bên mà giữ thanh cuộn chính của trang theo mặc định của hệ điều hành, thứ người dùng đã quen.
Khả năng sử dụng: đừng làm thanh cuộn khó thấy
Thanh cuộn không chỉ để trang trí: nó cho biết nội dung còn dài bao nhiêu và là cách kéo nhanh với người dùng chuột. Thumb nên có màu đủ khác rãnh để nhìn ra, và độ rộng quá mảnh như 2 đến 4 pixel sẽ khó kéo với người run tay hoặc dùng bàn di chuột. Tùy chọn ẩn thanh cuộn chỉ nên dùng cho những vùng có dấu hiệu khác cho thấy cuộn được, như dải thẻ trượt ngang có nội dung bị cắt ở mép. Khi ẩn, vùng đó vẫn cuộn được bằng con lăn, bàn phím nếu nhận focus và cảm ứng. scrollbar-gutter: stable giữ sẵn chỗ cho thanh cuộn nên nội dung không bị đẩy sang trái khi thanh cuộn xuất hiện hoặc biến mất.
Giới hạn cần biết
Công cụ không tạo được mũi tên hai đầu thanh cuộn (::-webkit-scrollbar-button) và không tạo hình ảnh nền cho thumb. Thuộc tính chuẩn không có hover, nên ở Cách 1 màu khi rê chuột chỉ có tác dụng trên trình duyệt cũ. Trên macOS, khi hệ thống đặt thanh cuộn chỉ hiện lúc cuộn, trình duyệt có thể vẽ thanh cuộn dạng nổi và bỏ qua một phần tùy biến; khi bạn đặt độ rộng cho ::-webkit-scrollbar, Chrome chuyển sang vẽ thanh cuộn cố định. Trên điện thoại, thanh cuộn thường là dạng nổi của hệ điều hành và phần lớn tùy biến không hiện. Khung xem thử phản ánh đúng trình duyệt bạn đang mở, muốn biết trên trình duyệt khác thì cần mở trang trên trình duyệt đó.
Câu hỏi thường gặp (FAQ)
Custom scrollbar CSS là gì?
Là việc dùng CSS để đổi màu, độ rộng, bo góc của thanh cuộn thay cho kiểu mặc định của hệ điều hành. Có hai cách: thuộc tính chuẩn scrollbar-color, scrollbar-width và bộ giả phần tử ::-webkit-scrollbar.
Vì sao thanh cuộn trên Chrome mất bo góc sau khi tôi thêm scrollbar-color?
Từ Chrome 121, Chrome hỗ trợ scrollbar-color và scrollbar-width. Khi một phần tử có một trong hai thuộc tính này khác auto, Chrome bỏ qua các luật ::-webkit-scrollbar trên phần tử đó, nên bo góc, độ rộng px và hover biến mất. Chọn Cách 2 trong công cụ nếu muốn giữ chúng.
Firefox có hỗ trợ ::-webkit-scrollbar không?
Không. Firefox chỉ hỗ trợ scrollbar-color và scrollbar-width. Vì vậy mã của công cụ luôn có phần thuộc tính chuẩn để Firefox cũng có thanh cuộn đúng màu.
scrollbar-width có nhận giá trị pixel không?
Không. scrollbar-width chỉ nhận auto, thin hoặc none. Độ rộng tính bằng pixel chỉ đặt được qua ::-webkit-scrollbar.
Làm sao đổi màu thanh cuộn khi rê chuột?
Dùng ::-webkit-scrollbar-thumb:hover, công cụ đã sinh sẵn. Thuộc tính chuẩn scrollbar-color không có trạng thái rê chuột riêng cho thumb.
Ẩn thanh cuộn nhưng vẫn cuộn được thế nào?
Đặt scrollbar-width: none cho phần tử và ::-webkit-scrollbar { display: none } cho trình duyệt cũ. Bật tùy chọn Ẩn hẳn thanh cuộn trong công cụ để có mã này. Chỉ nên ẩn khi người dùng vẫn nhận ra được vùng đó cuộn được.
Vì sao thanh cuộn của tôi không đổi trên macOS?
Nếu hệ thống đặt thanh cuộn chỉ hiện khi cuộn, trình duyệt có thể dùng thanh cuộn dạng nổi và bỏ qua một phần tùy biến. Thử đổi thiết lập Hiện thanh cuộn thành Luôn luôn trong Cài đặt hệ thống để kiểm tra.
Nên chọn Cách 1 hay Cách 2?
Chọn Cách 1 nếu chỉ cần thanh cuộn hợp màu và muốn mã dựa trên chuẩn, ít phải sửa về sau. Chọn Cách 2 nếu thiết kế bắt buộc thanh cuộn bo tròn, độ rộng chính xác và có màu khi rê chuột trên Chrome, Edge, Safari.
Áp thanh cuộn tùy chỉnh cho một div thế nào?
Chọn Một class cụ thể, nhập tên class, sao chép CSS rồi thêm class đó vào div. Div cần có chiều cao giới hạn và overflow: auto thì mới xuất hiện thanh cuộn, như trong HTML mẫu của công cụ.
Tailwind có lớp cho thanh cuộn không?
Tailwind không có lớp tiện ích sẵn cho thanh cuộn. Bạn có thể dùng arbitrary property như [scrollbar-width:thin] [scrollbar-color:#94a3b8_#f1f5f9] (dấu gạch dưới thay cho khoảng trắng), công cụ sinh sẵn dòng này. Phần ::-webkit-scrollbar nên đặt trong file CSS chung.
scrollbar-gutter: stable dùng để làm gì?
Nó giữ sẵn khoảng trống cho thanh cuộn kể cả khi nội dung chưa đủ dài để cuộn, nên bố cục không bị xô lệch khi nội dung dài ra và thanh cuộn xuất hiện.
Thanh cuộn tùy chỉnh có hiện trên điện thoại không?
Thường là không rõ. Trình duyệt di động phần lớn dùng thanh cuộn nổi, mảnh của hệ điều hành và chỉ hiện lúc đang cuộn, nhiều tùy biến không có tác dụng.
Công cụ có gửi dữ liệu lên máy chủ không?
Không. Mã được sinh và xem thử ngay trong trình duyệt của bạn.
Từ khóa liên quan
- custom scrollbar css
- css scrollbar
- tùy chỉnh thanh cuộn css
- scrollbar css generator
- scrollbar-color
- scrollbar-width
- ::-webkit-scrollbar
- đổi màu thanh cuộn
- ẩn thanh cuộn css
- scrollbar firefox css
- scrollbar chrome 121
- thanh cuộn bo tròn css
- scrollbar hover css
- scrollbar-gutter stable
- custom scrollbar tailwind
- thanh cuộn dark mode
- style scrollbar div
- webkit-scrollbar-thumb
- hide scrollbar css
