Tạo kiểu cho thanh cuộn bằng CSS: Cách hiện đại để tạo kiểu cho thanh cuộn
Kể từ những ngày đầu của web, việc tùy chỉnh thanh cuộn của trình duyệt đã được chứng minh là rất khó để chuẩn hóa trên các trình duyệt chính. May mắn là vào tháng 9 năm 2018, một Bản thảo làm việc của W3C có tên là CSS Scrollbars đã được phát hành, có vẻ như một cách khả thi để cuối cùng thực hiện được điều này!
Tính đến năm 2020 , 96% user internet đang chạy các trình duyệt hỗ trợ tạo kiểu thanh cuộn CSS, nhưng bạn cần viết hai bộ luật CSS để áp dụng cho các trình duyệt Firefox, Webkit và Chromium.
Hãy nhảy vào một số mẫu mã!
Các giải pháp JavaScript bị thiếu hụt vì chúng gặp khó khăn trong việc mô phỏng các hành vi cao cấp như cuộn theo quán tính (ví dụ: chuyển động giảm dần khi cuộn qua bàn di chuột).
Thanh cuộn trong Chrome / Edge / Safari
Tạo kiểu thanh cuộn cho Chrome / Edge / Safari có sẵn sau tiền tố nhà cung cấp -webkit-scrollbar
body::-webkit-scrollbar { width: 12px; /* width of the entire scrollbar */ } body::-webkit-scrollbar-track { background: orange; /* color of the tracking area */ } body::-webkit-scrollbar-thumb { background-color: blue; /* color of the scroll thumb */ border-radius: 20px; /* roundness of the scroll thumb */ border: 3px solid orange; /* creates padding around scroll thumb */ } 
Nhưng có một tin tốt ... Và một tin xấu:
Tin tốt! Mã này hoạt động hoàn toàn tốt trong các bản phát hành mới nhất của Chrome / Edge / Safari!
Tin xấu? Thật không may, thông số kỹ thuật này đã chính thức bị W3C từ bỏ, vì vậy ta có thể mong đợi nó sẽ dần bị ngừng sử dụng trong những năm tới.
Microsoft Edge chính thức chuyển sang động cơ Chromium V8 vào tháng 1 năm 2020!
Thanh cuộn trong Firefox
Firefox là nhà vô địch của các tiêu chuẩn W3C mới và họ luôn sẵn lòng thử các API mới nổi. Do đó, các tính năng CSS Scrollbars mới đã có sẵn trong các bản phát hành bình thường của Firefox:
body { scrollbar-width: thin; /* "auto" or "thin" */ scrollbar-color: blue orange; /* scroll thumb & track */ } 
Ngọt! Bạn có thể nhận thấy một vài điểm khác biệt so với thông số -webkit-scrollbar không dùng nữa.
Thứ nhất, nó ngắn gọn hơn! Và thứ hai, nó thiếu các tính năng như tạo độ đệm và độ tròn cho “ngón tay cái theo dõi”. Vì thông số kỹ thuật vẫn đang thay đổi, những tính năng bị thiếu này có thể được đưa vào.
Con đường phía trước
Làm cách nào để ta tạo kiểu thanh cuộn khi không có một API duy nhất, có thẩm quyền? Chỉ cần kết hợp cả hai cách tiếp cận!
/* The emerging W3C standard that is currently Firefox-only */ * { scrollbar-width: thin; scrollbar-color: blue orange; } /* Works on Chrome/Edge/Safari */ *::-webkit-scrollbar { width: 12px; } *::-webkit-scrollbar-track { background: orange; } *::-webkit-scrollbar-thumb { background-color: blue; border-radius: 20px; border: 3px solid orange; } Sau khi -webkit-scrollbar không được dùng nữa, bạn có thể dự phòng cho tiêu chuẩn CSS Scrollbars mới mà không bị lỡ nhịp.
Bản demo tương tác bên dưới:
Xem Bút ký abORvVW của alligatorio ( @alligatorio ) trên CodePen .
Hãy thử chuyển sang một trình duyệt khác để xem nó hoạt động. Hỗ trợ các bản phát hành Firefox / Chrome / Safari / Edge mới nhất.
Các tin liên quan
Tạo các phần tử dính trong CSS Vị trí sử dụng: dính2020-09-02
Đầu vào biểu mẫu tạo kiểu trong CSS Với: bắt buộc,: tùy chọn,: hợp lệ và: không hợp lệ
2020-09-02
Tạo mặt nạ image trong CSS bằng thuộc tính mask-image
2020-09-02
rem vs em Unit trong CSS
2020-09-02
Hướng dẫn thực hành để sử dụng CSS Vị trí tương đối & tuyệt đối
2020-09-02
Một CSS Flexbox Cheatsheet
2020-09-02
Tham khảo: Tên màu CSS
2020-09-02
Một CSS Flexbox Cheatsheet
2020-09-02
Thuộc tính z-index CSS Mighty
2020-09-01
CSS: focus-trong Pseudo-Class
2020-09-01
