Màu thanh cuộn - Thủ thuật CSS

Các scrollbar-colortài sản kiểm soát hai màu sắc của một thanh cuộn: các màu ngón tay cái và màu sắc theo dõi . scrollbar-colorlà một phần của dự thảo Mô-đun Thanh cuộn cấp 1 của Nhóm làm việc CSS, vẫn đang trong quá trình hoàn thiện tính đến thời điểm viết bài này.

Trước đó scrollbar-color, các nhà phát triển không có cách nào tiêu chuẩn để thay đổi giao diện mặc định của thanh cuộn của trình duyệt mà không sử dụng đến ẩn thanh cuộn qua overflow: hiddenvà hiển thị thanh cuộn dựa trên JavaScript hoặc sử dụng các thuộc tính thanh cuộn có tiền tố trình duyệt. Với scrollbar-colorMặt khác, chúng ta có thể tạo kiểu một thanh cuộn để phù hợp với một thiết kế mà không cần đến làm lại chức năng trình duyệt hoặc sử dụng tiền tố nhà cung cấp.

.scrollable-element ( scrollbar-color: red yellow; )

scrollbar-colorcũng sẽ chấp nhận các giá trị darkvà lightđể phù hợp với sở thích của người dùng nếu họ đang sử dụng chế độ tối trên Mac OSX.

.scrollable-element ( scrollbar-color: dark; )

Kể từ tháng 3 năm 2019, hỗ trợ cho darkvà lightgiá trị không có sẵn trong bất kỳ trình duyệt nào. được hỗ trợ trong Firefox. Xem phần hỗ trợ trình duyệt bên dưới để biết chi tiết.

Cú pháp

scrollbar-color: auto | dark | light | ;

Giá trị

scrollbar-color chấp nhận các giá trị sau:

auto là giá trị mặc định và sẽ hiển thị màu thanh cuộn tiêu chuẩn cho tác nhân người dùng.
dark sẽ yêu cầu tác nhân người dùng sử dụng thanh cuộn tối hơn để phù hợp với bảng màu hiện tại.
light sẽ yêu cầu tác nhân người dùng sử dụng thanh cuộn nhẹ hơn để phù hợp với bảng màu hiện tại.
chỉ định hai màu sẽ được sử dụng cho thanh cuộn. Màu đầu tiên dành cho “ngón tay cái” hoặc phần có thể di chuyển của thanh cuộn xuất hiện trên cùng. Màu thứ hai dành cho “bản nhạc” hoặc phần cố định của thanh cuộn.