Thanh cuộn tùy chỉnh Mixin - Thủ thuật CSS

Thanh cuộn là một trong những thành phần giao diện người dùng hiện diện trên hầu hết các trang của internet, nhưng chúng tôi (các nhà phát triển) có rất ít hoặc không kiểm soát được nó. Một số trình duyệt cung cấp cho chúng tôi khả năng tùy chỉnh giao diện của chúng nhưng đối với hầu hết các trình duyệt bao gồm cả Firefox thì điều đó là không thể.

Đã có một số cập nhật và tiêu chuẩn hóa để tạo kiểu thanh cuộn. Xem Trạng thái Hiện tại của Thanh cuộn tạo kiểu để biết thông tin cuối cùng mà bạn có thể chuyển sang một mixin.

Tuy nhiên, Chrome và Internet Explorer (có) cho phép chúng tôi xác định kiểu tùy chỉnh cho thanh cuộn. Tuy nhiên cú pháp phức tạp kinh khủng, và tất nhiên, chắc chắn là không chuẩn. Chào mừng đến với thế giới độc quyền. Đây là lý do tại sao bạn có thể muốn có một chút mixin để dễ dàng tùy chỉnh các thanh cuộn của mình. Đúng?

@mixin scrollbars($size, $foreground-color, $background-color: mix($foreground-color, white, 50%)) ( // For Google Chrome &::-webkit-scrollbar ( width: $size; height: $size; ) &::-webkit-scrollbar-thumb ( background: $foreground-color; ) &::-webkit-scrollbar-track ( background: $background-color; ) // For Internet Explorer & ( scrollbar-face-color: $foreground-color; scrollbar-track-color: $background-color; ) )

Sử dụng:

body ( @include scrollbars(10px, pink, red); ) .custom-area ( @include scrollbars(.5em, slategray); )

Thí dụ

Xem hỗn hợp Pen Sass để tạo kiểu thanh cuộn của Hugo Giraudel (@HugoGiraudel) trên CodePen.

Đi xa hơn

Trên cả hai trình duyệt, có nhiều tùy chọn hơn chỉ là màu sắc và kích thước. Tuy nhiên, chúng thường bị bỏ qua vì vậy tôi không nghĩ rằng việc trộn lẫn quá nhiều với các tùy chọn này là không đáng. Hãy thoải mái xây dựng một bản mixin nâng cao hơn với các tùy chọn bổ sung.

Đọc thêm: