Sơ lược về lịch sử tạo kiểu scrollbar:
Scrollbar từng là một kiểu UI mà chỉ Internet Explorer mới có thể làm như -ms-scrollbar-base-color. Những thứ này hiện tại đã khác, các phiên bản webkit hiện nay đã hỗ trợ đa số.
Điển hình như :-webkit-scrollbar. Đó là nội dung chủ yếu đề cập, 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 scrollbar và chiều rộng scrollbar.
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;
}Tạo kiểu scrollbar cho thế giới Safari / Chrome được hiển thị đằng sau tiền tố nhà cung cấp -webkit.
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 các scrollbar tùy chỉnh, vui lòng đọc bài viết CSS-Tricks này.
Các bài viết liên quan:
Họ thuộc tính -webkit-scrollbar bao gồm bảy loại phần tử khác nhau:
:: – 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 scrollbar
:: – 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 bị che phủ bởi phần tử cuộn có thể kéo (ngón tay cái)
:: – webkit-scrollbar-thumb địa chỉ phần tử cuộn có thể kéo có thể 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-angle giải quyết góc dưới (thường) của phần tử có thể cuộn, nơi hai scrollbar có thể gặp nhau
:: – webkit-resizer giải quyết tay cầm thay đổi kích thước có thể kéo xuất hiện phía trên góc scrollbar ở 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ũng có 11 lớp bộ chọn giả không bắt buộc nhưng cung cấp cho 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 scrollbar. 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.
Ví dụ Scrollbar
html {
background: lightgrey;
height: 100%;
overflow: hidden;
}
body {
height: 100%;
background: whitesmoke;
overflow: scroll;
width: 80%;
max-width: 600px;
margin: 0 auto;
padding: 3em;
font: 100%/1.4 serif;
border: 1px solid rgba(0,0,0,0.25)
}
p {
margin: 0 0 1.5em;
}
body::-webkit-scrollbar {
width: 1em;
}
body::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
body::-webkit-scrollbar-thumb {
background-color: darkgrey;
outline: 1px solid slategrey;
}
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </div> <div>Eveniet deserunt consequatur porro molestiae nulla</div>
Kết luận
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ỳ scrollbar nào có thể xuất hiện trên trang.
Đặt kiểu -webkit-scrollbar là một cách hay để buộc trang web của bạn hiển thị scrollbar ngang hoặc dọc trên các phiên bản Mac OS mới hơn Lion, trên đó các scrollbar thường bị ẩn theo mặc định.
Vì thuộc tính này nằm sau tiền tố nhà cung cấp -webkit, 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.
