CSS scrollbar generator: tạo custom scrollbar CSS đú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. CSS scrollbar generator 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
- Chế độ toàn trang đặt scrollbar-color ở html (kế thừa) và scrollbar-width cho mọi phần tử (không kế thừa) để Firefox đổi đủ mọi khung cuộ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.
Custom scrollbar CSS cho mọi trình duyệt: đoạn mã tối thiểu
Nếu chỉ cần một đoạn custom scrollbar CSS chạy được trên Chrome, Edge, Firefox và Safari hiện nay, đoạn tối thiểu gồm hai phần. Phần thứ nhất là thuộc tính chuẩn đặt trên khung cuộn: scrollbar-width: thin để thanh mảnh đi và scrollbar-color với hai màu, màu thumb trước, màu rãnh sau. Phần thứ hai là ba luật ::-webkit-scrollbar, ::-webkit-scrollbar-track và ::-webkit-scrollbar-thumb cho các bản Chrome trước 121 và Safari trước 26.2. Đặt phần chuẩn trước hay sau trong file không quan trọng, vì hai bộ không ghi đè nhau theo thứ tự mà theo quy tắc: trình duyệt hiểu thuộc tính chuẩn và thấy giá trị khác auto thì bỏ qua phần webkit. Mẫu Sáng tối giản trong công cụ chính là đoạn này với thumb màu #94a3b8 và rãnh #f1f5f9, đủ tương phản để nhìn ra trên nền trắng. Với giao diện tối, mẫu Tối dùng thumb #475569 trên rãnh #1e293b. Muốn thanh cuộn của ô nhập nhiều dòng, khung chat hay bảng đổi theo, hãy áp class cho chính phần tử có overflow: auto, vì thanh cuộn thuộc về phần tử cuộn chứ không thuộc về phần tử cha. Lỗi hay gặp nhất khi dán mã từ mạng là đặt class lên thẻ bao ngoài trong khi phần tử cuộn thật là thẻ con bên trong, khi đó thanh cuộn không đổi gì.
Ví dụ: một khung chat bo tròn hiện đúng trên cả Chrome và Firefox
Giả sử bạn có khung chat cao 320 pixel, nền trắng, muốn thanh cuộn rộng 8 pixel, bo tròn, màu xám nhạt và đậm lên khi rê chuột. Chọn Một class cụ thể, đặt tên chat-scroll, chọn Cách 2 giữ bo góc và hover, kéo độ rộng về 8, bo góc 8, khoảng hở 2, chọn thumb #cbd5e1, thumb khi rê chuột #94a3b8, rãnh #ffffff. Mã sinh ra có năm luật ::-webkit-scrollbar gắn với .chat-scroll và một khối @supports not selector(::-webkit-scrollbar) chứa scrollbar-width: thin cùng scrollbar-color: #cbd5e1 #ffffff. Trên Chrome, Edge và Safari, khung chat có thanh 8 pixel bo tròn, thumb cách mép rãnh 2 pixel nhờ viền trong suốt kết hợp background-clip: padding-box, và đổi màu khi rê chuột. Trên Firefox, khối @supports có hiệu lực nên thanh cuộn mảnh và đúng màu, chỉ không có bo góc và hover vì Firefox không hỗ trợ hai thứ đó. Nếu chọn Cách 1 thay vì Cách 2, Chrome 121 trở lên sẽ hiển thị giống Firefox, còn bo góc chỉ còn trên trình duyệt cũ. Đây là đánh đổi cần quyết định cùng người thiết kế: thanh cuộn giống hệt bản vẽ trên Chrome, hay mã đơn giản theo chuẩn và chấp nhận thanh cuộn dạng hệ thống có màu.
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, thêm scrollbar-width từ Safari 18.2 và scrollbar-color từ Safari 26.2 theo dữ liệu tương thích của MDN. Đ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 dùng phần chuẩn và bỏ qua phần webkit (Safari 26.2 trở lên cũng hiểu cả hai thuộc tính chuẩn), 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 scrollbar-color trên thẻ html, đặt scrollbar-width cho mọi phần tử bằng bộ chọn *, 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. Lý do tách làm hai khối: scrollbar-color được kế thừa nên đặt một lần ở html là lan xuống mọi vùng cuộn, còn scrollbar-width không kế thừa, nếu chỉ đặt ở html thì chỉ thanh cuộn chính của trang mảnh đi, các khung cuộn bên trong vẫn rộng như cũ trên Firefox. 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)
Có đặt scrollbar-width bằng px được không, ví dụ thin là bao nhiêu px?
Không đặt được bằng px. scrollbar-width chỉ nhận auto, thin hoặc none, độ rộng thật của thin do trình duyệt và hệ điều hành quyết định và khác nhau giữa Chrome, Firefox, Windows, macOS. Muốn độ rộng chính xác như 6 hay 10 pixel, dùng width của ::-webkit-scrollbar và chọn Cách 2 để Chrome, Edge, Safari không bỏ qua nó.
Custom scrollbar CSS có chạy trên Safari không?
Có. Safari hỗ trợ ::-webkit-scrollbar từ lâu, thêm scrollbar-width từ bản 18.2 và scrollbar-color từ bản 26.2. Trên iPhone và iPad, thanh cuộn là dạng nổi của hệ điều hành nên hầu hết tùy biến không hiện, đó là giới hạn của iOS chứ không phải của mã.
CSS scrollbar generator này có miễn phí không?
Miễn phí, không cần đăng ký. Mã CSS, HTML mẫu và dòng lớp Tailwind được sinh ngay trong trình duyệt, bạn chép và dùng cho mọi dự án.
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
- css scrollbar generator
- custom scrollbar css for all browsers
- scrollbar css hide
- scrollbar width thin px
- custom scrollbar firefox
- scrollbar css tailwind