Có cách nào để tạo thanh cuộn tùy chỉnh trong suốt trong trình duyệt webkit không?

Question

Tôi đang cố gắng tạo kiểu thanh cuộn sẽ xuất hiện trên DIV trong thiết kế mà tôi đang làm việc. Đó là webkit chỉ vì vậy figured tôi có thể nhận được khá một cách với CSS chỉ hơn là bổ sung.

Rất tiếc, tôi đã gặp sự cố lớn. Thiết kế yêu cầu thanh cuộn để chồng chéo nội dung với hiệu ứng trong suốt, giống như OS X Mountain Lion/iOS.

Khi kiểu tùy chỉnh được áp dụng cho thanh cuộn, tuy nhiên nó thay đổi kích thước nội dung để vừa với thanh cuộn. Tôi đã quản lý kích thước nội dung sao cho thanh tra hiển thị dưới thanh cuộn bây giờ, nhưng tôi không thể để làm cho thanh cuộn trong suốt.

Tôi đã thử áp dụng những cho cả :: - webkit-thanh cuộn và :: - vùng webkit-scrollbar-track:

• background: transparent màu nền trong suốt
• với rgba
• hình nền có độ trong suốt

Không có gì có vẻ hoạt động. Trước khi tôi từ bỏ và thử một giải pháp thanh cuộn tùy chỉnh JavaScript, tôi nghĩ rằng nếu có ai khác có câu trả lời.

* { 
 
    list-style:none; 
 
    margin:0; 
 
    padding:0; 
 
} 
 
body { 
 
    padding:20px; 
 
} 
 
#content { 
 
    background:#333; 
 
    height:400px; 
 
    padding:1px; 
 
    width:398px; 
 
} 
 
#content li { 
 
    background:#666; 
 
    height:100px; 
 
    margin-bottom:10px; 
 
    width:400px; 
 
} 
 
.scrollable-content { 
 
    overflow-x:hidden; 
 
    overflow-y:scroll; 
 
} 
 
.scrollable-content::-webkit-scrollbar { 
 
    background:transparent; 
 
    width:30px; 
 
} 
 
.scrollable-content::-webkit-scrollbar-track { 
 
    background:transparent; 
 
} 
 
.scrollable-content::-webkit-scrollbar-thumb { 
 
    background:#999; 
 
}

<ol class="scrollable-content" id="content"> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
</ol>

Tôi đã kiểm tra những đã:

webkit css scrollbar styling

How to prevent a webkit-scrollbar from pushing over the contents of a div?

CSS: Possible to "push" Webkit scrollbars into content?

Answer 1

tôi đã cập nhật ví dụ fiddle của bạn ->http://jsfiddle.net/F9p7S/

Hãy thử phương pháp này:

.scrollable-content::-webkit-scrollbar * { 
    background:transparent; 
} 
.scrollable-content::-webkit-scrollbar-thumb { 
    background:#999 !important; 
}