Pomyślałem, że pomocne byłoby skonsolidowanie najnowszych informacji na temat pasków przewijania, CSS i kompatybilności przeglądarki.
Obsługa paska przewijania CSS
Obecnie nie ma definicji stylów CSS paska przewijania przeglądarki. Artykuł W3C, o którym wspomniałem na końcu, ma następujące oświadczenie i został niedawno zaktualizowany (10 października 2014 r.):
Niektóre przeglądarki (IE, Konqueror) obsługują niestandardowe właściwości „scrollbar-shadow-color”, „scrollbar-track-color” i inne. Te właściwości są nielegalne: nie są zdefiniowane w żadnej specyfikacji CSS ani nie są oznaczone jako zastrzeżone (poprzedzając je znakiem „-vendor-”)
Microsoft
Jak wspomnieli inni, Microsoft obsługuje styl paska przewijania, ale tylko w IE8 i nowszych.
/* pseudo elements */::-webkit-scrollbar {}::-webkit-scrollbar-button {}::-webkit-scrollbar-track {}::-webkit-scrollbar-track-piece {}::-webkit-scrollbar-thumb {}::-webkit-scrollbar-corner {}::-webkit-resizer {}/* pseudo class selectors */:horizontal:vertical:decrement:increment:start:end:double-button:single-button:no-button:corner-present:window-inactive
Firefox (Gecko)
Począwszy od wersji 64 Firefox obsługuje styl paska przewijania poprzez właściwości scrollbar-color(częściowo, szkic W3C ) i scrollbar-width( szkic W3C ). Kilka dobrych informacji na temat implementacji można znaleźć w tej odpowiedzi .
Styl paska przewijania w różnych przeglądarkach
Biblioteki JavaScript i wtyczki mogą stanowić rozwiązanie dla różnych przeglądarek. Istnieje wiele opcji.
Możnaby wymieniać dalej ... Najlepszym rozwiązaniem jest poszukiwanie, badanie i testowanie dostępnych rozwiązań. Jestem pewien, że będziesz w stanie znaleźć coś, co będzie pasować do twoich potrzeb.
Zapobiegaj nielegalnemu stylowi paska przewijania
W przypadku, gdy chcesz zapobiec stylowaniu paska przewijania, który nie został poprawnie poprzedzony „-vendor”, ten artykuł w W3C zawiera kilka podstawowych instrukcji . Zasadniczo musisz dodać następujący CSS do arkusza stylów użytkownika powiązanego z Twoją przeglądarką. Te definicje zastąpią nieprawidłowe style paska przewijania na każdej odwiedzanej stronie.
Sieć istnieje już od ponad dwóch dekad i wciąż nie ma standardowego sposobu stylizowania pasków przewijania. Dwadzieścia lat komitetów normalizacyjnych nie zauważa, że ludzie przewijają rzeczy. Nie ma tempa powolnego, sarkastycznego klaskania, które odpowiednio wyrażałyby moje odczucia. Ale myślę, że 20-letnie opóźnienie między pierwszym a drugim klaśnięciem byłoby odpowiednie. W pewnym sensie jeszcze się nie urodziłem, kiedy pojawił się WWW, a teraz jestem inżynierem komputerowym. Dobra droga, W3C.
Parthian Shot
3
Wystarczy dodać dwa centy: Gmail i Youtube mają stylizowany pasek przewijania w Chrome, a natywny w Explorerze i Firefoksie. Jeśli te standardy są dla nich wystarczająco dobre, to też są wystarczające dla mnie
yonatanmn
9
@ PaulD.Waite Być może, ale można to zastosować do wszystkiego. A CSS istnieje jako język, dzięki czemu projektanci mogą zastąpić ustawienia domyślne. Cały pomysł polega na tym, że zły projektant interfejsu użytkownika może sprawić, że każdy element stanie się nieintuicyjny, ale kiedy tylko założycie, że projektant witryny jest niekompetentny, po co w ogóle pozwalać na dostosowywanie stron?
Parthian Shot
6
@ PaulD.Waite Oczywiście nie jest to jedna z tych rzeczy. Częściowo dlatego, że znajduje się w obszarze ekranu, który i tak powinien całkowicie kontrolować projektant witryny, więc nie stanowi zagrożenia dla bezpieczeństwa, a częściowo dlatego, że - w praktyce - nie stanowi problemu. Wiele witryn wdraża własne hacki, aby wyglądały i zachowywały się jak paski przewijania i działają dobrze. Nie tylko działają dobrze i wyglądają lepiej, ale ludzie faktycznie rozumieją, jak z nich korzystać, o to właśnie chodzi. Niestety, ponieważ są hackami, czasami nie bawią się dobrze z funkcjami drukowania.
Parthian Shot
5
Ta odpowiedź nie wyczerpuje całkowicie jego pytania, a mianowicie zastosowania stylów paska przewijania do konkretnego elementu div , a nie do całej strony.
Jestem pewien, że można go dostosować, ale wersja demo na stronie przewija się o wiele za wolno, a pasek przewijania jest zbyt trudny do uchwycenia.
Goose,
4
Podobnie jak praktycznie wszystkie wtyczki jQuery - [dreszcze] - jest to strasznie powolne w porównaniu z natywnymi, wątkowymi implementacjami przewijania przyspieszanymi przez GPU. Zupełnie nie nadaje się do poważnych zastosowań i stanowi przeszkodę dla dobrego UX. Radzę ci tego unikać, chyba że jest to witryna z zabawkami.
John Weisz
2
Nienawidzę, kiedy ludzie nazywają coś czystego javascript, a potem BAM! wtyczka jquery.
Dinh Tran,
Nie polecałbym używania nicescroll, ponieważ wyłącza on funkcje przeglądarki. Przewijanie środkowym kliknięciem nie działa z nicescroll.
Aloso,
uwielbiam ten niceScroll, nie dodaje otoki div wokół elementu, co oznacza, że nie psuje struktury HTML
datdinhquoc
11
Niestandardowe paski przewijania nie są możliwe w CSS, potrzebujesz trochę magii JavaScript.
Niektóre przeglądarki obsługują nieokreślone reguły CSS, takie jak ::-webkit-scrollbarWebkit, ale nie są idealne, ponieważ będą działać tylko w Webkit. IE też miało coś takiego, ale nie sądzę, żeby to już wspierały.
Konsekwentnie stylizowany i funkcjonalny w większości nowoczesnych przeglądarek
Nie jakieś niedorzeczne rozszerzenie jQuery o długości 3000 linii cr * p
... Ale niestety - nic!
Cóż, jeśli praca jest warta wykonania ... Udało mi się coś uruchomić w około 30 minut. Oświadczenie: istnieje wiele znanych (i prawdopodobnie kilka jeszcze nieznanych) problemów z tym związanych, ale zastanawiam się, po co te inne 2920 linii JS są dostępne w wielu ofertach!
tło: gradient liniowy (z prawej, czerwony, żółty);
xgqfrms
5
Wypróbowałem wiele wtyczek, większość z nich nie obsługuje wszystkich przeglądarek, wolę iScroll i nanoScroller działa dla wszystkich tych przeglądarek:
Dziękuję za demo. Najpierw uruchomiłem go z przeglądarką Firefox 58.0.2 (64-bit, Windows 7 Pro / 64) i wszystkie paski przewijania były identyczne. Następnie działał z wersją Chrome 65.0.3325.162 (oficjalna wersja) (64-bitowa) i wszystkie były różne. Więc (być może nieumyślnie) wykazałeś ograniczenia tego -webkit-podejścia.
CODE-REaD
4
Nowa wersja przeglądarki Firefox (64) obsługuje moduły przewijania CSS Poziom 1
Bardziej zwięzła odpowiedź. IMHO faktycznie odpowiedział na pytanie OP, które polegało na tym, jak stylizować tylko jednego diva. Miły.
Danimal Reks,
2
Istnieje sposób, w jaki można zastosować niestandardowe paski przewijania do niestandardowych elementów div w dokumentach HTML. Oto przykład, który pomaga. https://codepen.io/adeelibr/pen/dKqZNb Ale w skrócie. Możesz zrobić coś takiego.
Tego od dawna używa Google w niektórych swoich aplikacjach. Zobacz w kodzie, że jeśli zastosujesz kolejne klasy, w jakiś sposób ukryją pasek przewijania w Chrome, ale nadal działa.
Klasy są jfk-scrollbar, jfk-scrollbar-borderlessijfk-scrollbar-dark
Po prostu uznałem za przydatne usunięcie strzałek z pasków przewijania. Od 2015 roku jest używany w Mapach Google podczas wyszukiwania miejsc na liście wyników w interfejsie projektowania materiałów.
Próbowałem wiele zwojów JS i CSS i okazało się, że jest to bardzo łatwy w użyciu i przetestowany na IE, Safari i FF i działał dobrze
AS @thebluefox sugeruje
Oto jak to działa
Dodaj poniższy skrypt do
<scripttype="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><scripttype="text/javascript"src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script><scripttype="text/javascript"src="jquery.ui.touch-punch.min.js"></script><scripttype="text/javascript"src="facescroll.js"></script><scripttype="text/javascript">
jQuery(function(){// on page DOM load
$('#demo1').alternateScroll();
$('#demo2').alternateScroll({'vertical-bar-class':'styled-v-bar','hide-bars':false});})</script>
I to tutaj, w akapicie, w którym musisz przewijać
<divid="demo1"style="width:300px;height:250px;padding:8px;resize:both;overflow:scroll">
**Your Paragraph Comes Here**
</div>
Aby uzyskać więcej informacji, odwiedź stronę wtyczki
Dla osób, które wciąż szukają dobrego rozwiązania, po prostu znajduję ten prosty plugin
Niestandardowe pasy javascript w waniliowej bibliotece przewijania z natywnym przewijaniem, wykonane proste, lekkie, łatwe w użyciu i w różnych przeglądarkach.
W moim przypadku szukałem rozwiązań reagJS, autor zapewnia również opakowania dla reagujących, kątowych, vue i następnych przykładów
Przeglądarki Webkit (takie jak Chrome, Safari i Opera) obsługują niestandardowy pseudoelement :: - webkit-scrollbar , który pozwala nam modyfikować wygląd paska przewijania przeglądarki.
Uwaga: :: - WebKit-pasek przewijania nie jest obsługiwane przez IE i Firefox lub Edge.
<divclass="box"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate</p></div><div><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate</p></div>
overflow:auto;
tylko do tego<div>
. Więcej szczegółów w tle?Odpowiedzi:
Pomyślałem, że pomocne byłoby skonsolidowanie najnowszych informacji na temat pasków przewijania, CSS i kompatybilności przeglądarki.
Obsługa paska przewijania CSS
Obecnie nie ma definicji stylów CSS paska przewijania przeglądarki. Artykuł W3C, o którym wspomniałem na końcu, ma następujące oświadczenie i został niedawno zaktualizowany (10 października 2014 r.):
Microsoft
Jak wspomnieli inni, Microsoft obsługuje styl paska przewijania, ale tylko w IE8 i nowszych.
Przykład:
Chrome i Safari (WebKit)
Podobnie WebKit ma teraz własną wersję:
Z niestandardowych pasków przewijania w WebKit odpowiedni CSS:
Firefox (Gecko)
Począwszy od wersji 64 Firefox obsługuje styl paska przewijania poprzez właściwości
scrollbar-color
(częściowo, szkic W3C ) iscrollbar-width
( szkic W3C ). Kilka dobrych informacji na temat implementacji można znaleźć w tej odpowiedzi .Styl paska przewijania w różnych przeglądarkach
Biblioteki JavaScript i wtyczki mogą stanowić rozwiązanie dla różnych przeglądarek. Istnieje wiele opcji.
Możnaby wymieniać dalej ... Najlepszym rozwiązaniem jest poszukiwanie, badanie i testowanie dostępnych rozwiązań. Jestem pewien, że będziesz w stanie znaleźć coś, co będzie pasować do twoich potrzeb.
Zapobiegaj nielegalnemu stylowi paska przewijania
W przypadku, gdy chcesz zapobiec stylowaniu paska przewijania, który nie został poprawnie poprzedzony „-vendor”, ten artykuł w W3C zawiera kilka podstawowych instrukcji . Zasadniczo musisz dodać następujący CSS do arkusza stylów użytkownika powiązanego z Twoją przeglądarką. Te definicje zastąpią nieprawidłowe style paska przewijania na każdej odwiedzanej stronie.
Zduplikowane lub podobne pytania / źródło niepowiązane powyżej
Uwaga: ta odpowiedź zawiera informacje z różnych źródeł. Jeśli użyto źródła, jest ono również powiązane z tą odpowiedzią.
źródło
Spróbuj
Źródło: https://nicescroll.areaaperta.com/
Prosta implementacja
Jest to pasek przewijania wtyczki jQuery, więc można przewijać paski przewijania i wyglądać tak samo w różnych systemach operacyjnych.
źródło
Niestandardowe paski przewijania nie są możliwe w CSS, potrzebujesz trochę magii JavaScript.
Niektóre przeglądarki obsługują nieokreślone reguły CSS, takie jak
::-webkit-scrollbar
Webkit, ale nie są idealne, ponieważ będą działać tylko w Webkit. IE też miało coś takiego, ale nie sądzę, żeby to już wspierały.źródło
Jak wiele osób, szukałem czegoś, co:
... Ale niestety - nic!
Cóż, jeśli praca jest warta wykonania ... Udało mi się coś uruchomić w około 30 minut. Oświadczenie: istnieje wiele znanych (i prawdopodobnie kilka jeszcze nieznanych) problemów z tym związanych, ale zastanawiam się, po co te inne 2920 linii JS są dostępne w wielu ofertach!
źródło
Wypróbowałem wiele wtyczek, większość z nich nie obsługuje wszystkich przeglądarek, wolę iScroll i nanoScroller działa dla wszystkich tych przeglądarek:
Ale iScroll nie działa z dotykiem!
demo iScroll : http://lab.cubiq.org/iscroll/examples/simple/
demo nanoScroller : http://jamesflorentino.github.io/nanoScrollerJS/
źródło
Sprawdź ten link. Przykład z działającą wersją demonstracyjną
Paski przewijania CSS
źródło
-webkit-
podejścia.Nowa wersja przeglądarki Firefox (64) obsługuje moduły przewijania CSS Poziom 1
Źródło: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scrollbars
https://codepen.io/fatihhayri/pen/pqdrbd
źródło
Oto przykład zestawu internetowego, który działa w Chrome i Safari:
CSS:
Wynik:
źródło
dał mi niezły telefon / osx jak ten.
źródło
Istnieje sposób, w jaki można zastosować niestandardowe paski przewijania do niestandardowych elementów div w dokumentach HTML. Oto przykład, który pomaga. https://codepen.io/adeelibr/pen/dKqZNb Ale w skrócie. Możesz zrobić coś takiego.
Plik CSS wygląda następująco.
źródło
Tego od dawna używa Google w niektórych swoich aplikacjach. Zobacz w kodzie, że jeśli zastosujesz kolejne klasy, w jakiś sposób ukryją pasek przewijania w Chrome, ale nadal działa.
Klasy są
jfk-scrollbar
,jfk-scrollbar-borderless
ijfk-scrollbar-dark
http://jsfiddle.net/76kcuem0/32/
Po prostu uznałem za przydatne usunięcie strzałek z pasków przewijania. Od 2015 roku jest używany w Mapach Google podczas wyszukiwania miejsc na liście wyników w interfejsie projektowania materiałów.
źródło
Pasek przewijania Webkit nie obsługuje większości przeglądarek.
Obsługuje CHROME
Inną metodą jest wtyczka Jquery Scroll Bar
Obsługuje wszystkie przeglądarki i jest łatwy do zastosowania
PRÓBNY
źródło
Próbowałem wiele zwojów JS i CSS i okazało się, że jest to bardzo łatwy w użyciu i przetestowany na IE, Safari i FF i działał dobrze
AS @thebluefox sugeruje
Oto jak to działa
Dodaj poniższy skrypt do
I to tutaj, w akapicie, w którym musisz przewijać
Aby uzyskać więcej informacji, odwiedź stronę wtyczki
FaceScroll Niestandardowy pasek przewijania
mam nadzieję, że to pomoże
źródło
Dla osób, które wciąż szukają dobrego rozwiązania, po prostu znajduję ten prosty plugin
W moim przypadku szukałem rozwiązań reagJS, autor zapewnia również opakowania dla reagujących, kątowych, vue i następnych przykładów
źródło
Przeglądarki Webkit (takie jak Chrome, Safari i Opera) obsługują niestandardowy pseudoelement :: - webkit-scrollbar , który pozwala nam modyfikować wygląd paska przewijania przeglądarki.
Uwaga: :: - WebKit-pasek przewijania nie jest obsługiwane przez IE i Firefox lub Edge.
Odniesienia: Jak utworzyć niestandardowy pasek przewijania
źródło
Używaj tylko CSS działa w przeglądarce Firefox +64
Więcej informacji: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scrollbars
źródło
Załóżmy, że masz div jako
Zastosuj style CSS jako
Wynikowy zwój pojawi się jako
źródło
Lub użyj czegoś takiego:
I zainicjuj:
I dostosuj:
źródło