Thanh cuộn - Thủ thuật CSS

Sơ lược về lịch sử tạo kiểu thanh cuộn:

Nó từng là điều mà chỉ Internet Explorer (phiên bản cổ) mới có thể làm được với những thứ như thế này -ms-scrollbar-base-color. Những thứ này không tồn tại nữa.
Sau đó, các công cụ trình duyệt dựa trên WebKit đã bắt đầu với những thứ như ::-webkit-scrollbar. Đó là những gì mà mục nhập Alamanac này chủ yếu bao gồm, vì nó hoạt động trên toàn cảnh Safari / Chrome ngày nay.
Các tiêu chuẩn cuối cùng cũng đã tham gia và các tùy chọn tạo kiểu đó được bao phủ bởi các thuộc tính không có tiền tố như màu thanh cuộn và chiều rộng thanh cuộn.

Tạo kiểu thanh cuộn cho thế giới Safari / Chrome được hiển thị đằng sau -webkittiền tố nhà cung cấp.

Mục nhập niên giám này là tổng quan, để biết phân tích đầy đủ hơn về cách làm việc với thanh cuộn tùy chỉnh, vui lòng đọc bài viết CSS-Tricks này.

body::-webkit-scrollbar ( width: 1em; ) body::-webkit-scrollbar-track ( box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); ) body::-webkit-scrollbar-thumb ( background-color: darkgrey; outline: 1px solid slategrey; )

Họ -webkit-scrollbarthuộc tính bao gồm bảy phần tử giả khác nhau, cùng nhau, tạo thành phần tử giao diện người dùng thanh cuộn đầy đủ:

::-webkit-scrollbarđịa chỉ nền của chính thanh. Nó thường được bao phủ bởi các yếu tố khác
::-webkit-scrollbar-button giải quyết các nút định hướng trên thanh cuộn
::-webkit-scrollbar-track giải quyết không gian trống “bên dưới” thanh tiến trình
::-webkit-scrollbar-track-piece là lớp trên cùng của thanh tiến trình không được bao phủ bởi phần tử cuộn có thể kéo (ngón tay cái)
::-webkit-scrollbar-thumb giải quyết phần tử cuộn có thể kéo thay đổi kích thước tùy thuộc vào kích thước của phần tử có thể cuộn
::-webkit-scrollbar-corner giải quyết (thường) góc dưới cùng của phần tử có thể cuộn, nơi hai thanh cuộn có thể gặp nhau
::-webkit-resizergiải quyết điều khiển thay đổi kích thước có thể kéo xuất hiện phía trên scrollbar-cornerở góc dưới cùng của một số phần tử

Ngoài các phần tử giả này, còn có 11 lớp bộ chọn giả không bắt buộc nhưng cung cấp cho các nhà thiết kế sức mạnh để tạo kiểu các trạng thái và tương tác khác nhau của giao diện người dùng thanh cuộn. Bạn có thể tìm thấy bản phân tích đầy đủ về các bộ chọn giả đó và ví dụ chi tiết trong bài viết CSS-Tricks này.

Kiểm tra cây bút này!

Điểm quan tâm

Nếu không có bộ chọn đủ điều kiện đứng trước các phần tử giả khác nhau, các kiểu sẽ áp dụng cho bất kỳ thanh cuộn nào có thể xuất hiện trên trang.
Đặt -webkit-scrollbarkiểu là một cách hay để buộc trang web của bạn hiển thị thanh cuộn ngang hoặc dọc trên các phiên bản Mac OS mới hơn Lion, trên đó các thanh cuộn thường bị ẩn theo mặc định.
Vì thuộc tính này nằm sau -webkittiền tố nhà cung cấp nên một số plugin jQuery đã được viết thành “polyfill” hoặc mở rộng chức năng này cho các trình duyệt khác. Một trong những plugin như vậy là jScrollPane.