2015-04-17 11 views
13

Mam ten ładny pasek przewijania, który działa zarówno w przeglądarce Chrome, jak i Safari w najnowszych wersjach. Czy istnieje możliwość utworzenia tego samego rodzaju paska przewijania w przeglądarkach IE 9+ przy użyciu tylko CSS3?Jak utworzyć niestandardowe paski przewijania w IE?

.scrollbar 
{ 
    float: left; 
    height: 300px; 
    background: #F5F5F5; 
    overflow-y: scroll; 
    margin-bottom: 25px; 
} 

.scrollbar-active 
{ 
    min-height: 450px; 
} 

#scroll::-webkit-scrollbar-track 
{ 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    background-color: #F5F5F5; 
} 

#scroll::-webkit-scrollbar 
{ 
    width: 10px; 
    background-color: #F5F5F5; 
} 

#scroll::-webkit-scrollbar-thumb 
{ 
    background-color: #000000; 
    border: 2px solid #555555; 
} 

HTML

<div class="scrollbar" id="scroll"> 
    <div class="scrollbar-active"></div> 
</div> 

http://jsfiddle.net/7gmut6w3/2/

Odpowiedz

23

Są to właściwości CSS można użyć, aby dostosować styl przewijania IE:

body{ 
    scrollbar-base-color: #000; 
    scrollbar-face-color: #000; 
    scrollbar-3dlight-color: #000; 
    scrollbar-highlight-color: #000; 
    scrollbar-track-color: #000; 
    scrollbar-arrow-color: black; 
    scrollbar-shadow-color: #000; 
    scrollbar-dark-shadow-color: #000; 
} 

Więcej informacji można znaleźć here i here.

SŁOWO WSTĘPNE - Dostosowanie natywnego elementu przeglądarki internetowej (np. Paska przewijania) może wprowadzić różnego rodzaju dziwne przypadki brzegowe i problemy z doświadczeniem użytkownika. Zachowaj ostrożność przy dokonywaniu jakichkolwiek zmian, upewniając się, że dodatkowe korzyści płynące z niestandardowych pasków przewijania przewyższają problemy, które pojawią się.

+1

Tylko zwrócić uwagę na innych - wygląda na to, że nadal nie ma możliwości dostosowania krzywej/obramowania paska przewijania IE. Lub, aby pozbyć się górnej i dolnej strzałki. – mmcrae

+1

... lub zmień kolor kciuków niezależnie od koloru suwaka. – Walkor

+1

Czy mam zeza zeza, czy też pierwsze dwie właściwości są takie same? – PieBie

3

jeśli ustawisz wszystkie elementy obszaru górnego na ten sam kolor, co ścieżka - w istocie - ukryjesz strzałkę, ale pozostanie w niej miejsce.

scrollbar-track-color: #AAA; 
scrollbar-3dlight-color: #AAA; 
scrollbar-darkshadow-color: #AAA; 
scrollbar-arrow-color: #AAA; 

teraz, jeśli tylko możesz dostosować szerokość, aby pasek przewijania był węższy !! czy ktokolwiek to wymyślił?

+0

To jest doskonałe rozwiązanie aby ukryć paskudne strzałki paska przewijania w Windows 8 bez kodowania pasków przewijania od zera. Dziękuję za udostępnienie –

Powiązane problemy