Czy jest możliwe zwiększenie szerokości paska przewijania na elemencie <div> umieszczonym wewnątrz ?Szerokość paska przewijania CSS
Nie mówię o domyślnym przewijania w przeglądarce samego, ta strona działa w trybie pełnoekranowym, a ponieważ przewijania przeglądarka nie wchodzi w obraz, wewnętrzna <div> element ma swój własny pasek przewijania.
Jeśli mówimy o przewijania, który pojawia się automatycznie na div z overflow: scroll (lub auto), to nie, to nadal natywny pasek przewijania renderowany przez przeglądarkę przy użyciu zwykłych widżetów systemu operacyjnego, a nie coś, co można stylizować (*).
Chociaż można go zastąpić proxy wykonanych z stylable divs i JavaScript, jak sugeruje Matt, nie polecam go w ogólnym przypadku. Paski przewijania sterowane skryptami nigdy nie zachowują się dokładnie tak samo jak paski przewijania OS, powodując problemy z obsługą i ułatwieniami dostępu.
(*: Z wyjątkiem stylów kolorowania IE, których tak naprawdę nie polecam, poza tym, że są tylko IE, użycie ich zmusza IE do powrotu z użycia ładnych obrazów paska przewijania z aktualnego motywu Windows do brzydkiego starego Paski przewijania w stylu Win95).
Tak.
Jeśli pasek przewijania nie jest pasek przewijania w przeglądarce, a następnie zostanie ona zbudowana z regularnych elementów HTML (prawdopodobnie div s i span s) i może w ten sposób być stylizowany (lub będzie Flash, Java, itp i mogą być dostosowane zgodnie z te środowiska).
Specyfika zależy od zastosowanej struktury DOM.
może być zainteresowany w wtyczce JScrollPane JQuery, wydaje się łatwy w użyciu http://jscrollpane.kelvinluck.com/
Moje doświadczenie w próbie użycia CSS do modyfikacji pasków przewijania nie jest możliwe. Tylko IE pozwoli ci to zrobić.
Webkit pozwala teraz na ':: - webkit-scrollbar- [track | thumb | button | corner]' – Trevor
Można to zrobić w przeglądarkach opartych na silniku WebKit (takich jak Chrome i Safari) z tylko CSS:
::-webkit-scrollbar {
width: 2em;
height: 2em
}
::-webkit-scrollbar-button {
background: #ccc
}
::-webkit-scrollbar-track-piece {
background: #888
}
::-webkit-scrollbar-thumb {
background: #eee
}
Demo: jsfiddle.net/2aHeE
Referencje:
To nie działa w Edge 40.15063.674.0 na dzień 24.04.2017. Grrr. – enigment
Nie rozumiem, dlaczego wszyscy są tak zadowoleni z tego nadęty JScrollPane gdy istnieją łatwiejsze lżejsze rozwiązania tam, że są o wiele szybciej przy użyciu pokrętła: http://baijs.com/tinyscrollbar/
Widziałem twój komentarz, wypróbowałem go i po prostu rzucił błąd: "Nie można odczytać właściwości" offsetHeight "z undefined". JScrollPane właśnie pracował. Więc może dlatego – Paralife
Niestety, George, rozwiązanie, które wygląda obiecująco, po prostu nie działa. – c0d3p03t
pracował dla mnie, ale nie przewijał się przy użyciu klawiatury w górę/w dół – robotik
można utwierdzi konkretny pasek narzędzi dla div
div::-webkit-scrollbar {
width: 12px;
}
div::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
}
zobacz demo w jsfiddle.net
Nie na Edge, nie na Firefox – Mishax
Witaj Bobrowo, masz rację, jego przepełnienie: scroll/auto scrollbar. Spróbowałem jScrollPane zasugerowanego przez Matta, ale jego degradacja wydajności przewijania była ogromna. – t0mcat
Twoja odpowiedź nie jest już obsługiwana. Istnieje kilka sposobów stylizowania pasków przewijania w Chrome i IE od roku 2015 –
To prawda, że nie jest to już poprawna odpowiedź. –