Tạo kiểu thanh cuộn CSS3 trên div

Question

Tôi có thể tạo thanh cuộn webkit bằng CSS3 như thế nào?

Ý tôi là các đặc tính này

::-webkit-scrollbar { 
    width: 12px; 
} 

::-webkit-scrollbar-track { 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px; 
} 

::-webkit-scrollbar-thumb { 
    border-radius: 10px; 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
} 

Đây là div của tôi thẻ

<div class="scroll"></div> 

Đây là CSS hiện tại của tôi

.scroll { 
    width: 200px; height: 400px; 
    overflow: hidden; 
} 

Answer 1

Thiết overflow: hidden ẩn thanh cuộn. Đặt overflow: scroll để đảm bảo thanh cuộn xuất hiện mọi lúc.

Để sử dụng thuộc tính ::webkit-scrollbar, chỉ cần nhắm mục tiêu .scroll trước khi gọi điện.

.scroll { 
    width: 200px; 
    height: 400px; 
    background: red; 
    overflow: scroll; 
} 
.scroll::-webkit-scrollbar { 
    width: 12px; 
} 

.scroll::-webkit-scrollbar-track { 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px; 
} 

.scroll::-webkit-scrollbar-thumb { 
    border-radius: 10px; 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
} 
​ 

Xem live example

Answer 2

.scroll { 
    width: 200px; height: 400px; 
    overflow: auto; 
} 

Answer 3

Bạn đang thiết overflow: hidden. Thao tác này sẽ ẩn mọi thứ quá lớn đối với <div>, nghĩa là thanh cuộn sẽ không được hiển thị. Cho <div> một chiều rộng và/hoặc chiều cao cho phép của bạn, và thay đổi overflow-auto:

.scroll { 
    width: 200px; 
    height: 400px; 
    overflow: scroll; 
} 

Nếu bạn chỉ muốn hiển thị một thanh cuộn nếu nội dung dài hơn <div>, thay đổi overflow-overflow: auto. Bạn cũng có thể chỉ hiển thị một thanh cuộn bằng cách sử dụng overflow-y hoặc overflow-x.

Answer 4

Sự cố với thanh cuộn css3 là, tương tác chỉ có thể được thực hiện trên nội dung. chúng tôi không thể tương tác với thanh cuộn trên thiết bị cảm ứng.