Áp dụng kiểu thanh cuộn webkit cho phần tử được chỉ định

Question

Tôi mới sử dụng các phần tử giả được đặt trước bằng dấu hai chấm. Tôi đã đi qua một bài viết blog thảo luận về phong cách của thanh cuộn bằng cách sử dụng một số webkit chỉ css. CSS phần tử giả có thể được áp dụng cho các phần tử riêng lẻ không?

/* This works by applying style to all scroll bars in window */ 
::-webkit-scrollbar { 
    width: 12px; 
} 

/* This does not apply the scrollbar to anything */ 
div ::-webkit-scrollbar { 
    width: 12px; 
} 

Trong mục này, tôi muốn làm cho thanh cuộn của div được tùy chỉnh, nhưng thanh cuộn của cửa sổ chính vẫn ở chế độ mặc định.

http://jsfiddle.net/mrtsherman/4xMUB/1/

Answer 1

Ý tưởng của bạn là chính xác. Tuy nhiên, ký hiệu div ::-webkit-scrollbar có khoảng trắng sau div thực ra giống như div *::-webkit-scrollbar; công cụ chọn này có nghĩa là "thanh cuộn của bất kỳ phần tử nào bên trong <div>". Sử dụng div::-webkit-scrollbar.

Xem demo tại http://jsfiddle.net/4xMUB/2/

Answer 2

Tôi muốn sử dụng một bộ chọn lớp cho việc sử dụng một thanh cuộn tùy chỉnh.

Bằng cách nào đó .foo::-webkit không hoạt động, nhưng tôi đã tìm ra rằng div.foo::-webkit không hoạt động! Những ## $$ * ## pseudo-thứ ....

Xem http://jsfiddle.net/QcqBM/16/

Answer 3

Bạn cũng có thể áp dụng những quy tắc bởi id của phần tử. Giả sử thanh cuộn của div phải được tạo kiểu có id "myDivId". Sau đó, bạn có thể làm theo. Bằng cách này, bạn có thể sử dụng các kiểu khác nhau cho các thanh cuộn của các phần tử khác nhau.

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

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

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

http://jsfiddle.net/QcqBM/516/