Czy istnieje sposób na utworzenie przezroczystego niestandardowego paska przewijania w przeglądarkach Webkit?

Question

Próbuję ustawić paski przewijania, które pojawią się na DIV w projekcie, nad którym pracuję. To jest tylko webkit, więc doszedłem do wniosku, że mogę uzyskać całkiem niezły sposób dzięki CSS, a nie wtyczkom.

Niestety trafiłem na poważny problem. Projekt wymaga, aby paski przewijania nakładały się na treść z efektem przezroczystości, podobnie jak OS X Mountain Lion/iOS.

Po zastosowaniu niestandardowych stylów na pasku przewijania zmienia się rozmiar zawartości tak, aby pasował do paska przewijania. Udało mi się dopasować rozmiar tak, aby w inspektorze pokazywał się teraz pod paskiem przewijania, ale nie mogę aby ścieżka paska przewijania była przezroczysta.

Próbowałem stosowania nich zarówno :: - WebKit przewijania i :: - regiony WebKit-przewijania-track:

• background: transparent
• przejrzysty kolor tła z RGBA
• obraz tła z przezroczystością

Żadne z nich nie działa. Zanim zrezygnuję i wypróbuję niestandardowe rozwiązanie paska przewijania JavaScript, pomyślałem, że zobaczę, czy ktoś inny ma odpowiedź.

* { 
 
    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>

Sprawdziłem te już:

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

I zaktualizowaniu skrzypce przykład ->http://jsfiddle.net/F9p7S/

Spróbuj podejście:

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