Zmiana wyglądu scrollbaru - poradnik

[AlexsanderARG]

Witajcie, dzisiaj przedstawię Wam jak zmienić wygląd scrollbaru - paska przewijania na naszej witrynie.

 

Część osób może wiedzieć a część nie, ja sam nie wiedziałem przez dłuższy czas jak to zrobić a gdy spotkałem jakieś poradniki to one nie działały i przez to nie mogłem się tego nawet nauczyć. Ale to już przeszłość więc zapraszam do poradnika!

 

Na samym początku musimy w naszym pliku css stworzyć tą zmianę "pisaną" także w moim przypadku będzie to body

To jest ukryta treść, proszę

• Zaloguj się
• lub
• Zarejestruj się

Jednakże to nie zadziała gdyż potrzebujemy selektor zasięgu który przedstawia nam się następująco

To jest ukryta treść, proszę

• Zaloguj się
• lub
• Zarejestruj się

No wygląda to lepiej jednak to nie wszystko, gdyż potrzebujemy określić co chcemy zmienić, w naszym przypadku jest to scrollbar lecz przed nim dodajemy przedrostek webkit

To jest ukryta treść, proszę

• Zaloguj się
• lub
• Zarejestruj się

I teraz możemy dokonać zmian, zmienimy szerokość naszego pionowego paska

To jest ukryta treść, proszę

• Zaloguj się
• lub
• Zarejestruj się

Ale uwaga, nie zmieni to wysokości naszego poziomego paska, aby zmienić poziomy pasek zmieniamy właśnie jego wysokość

To jest ukryta treść, proszę

• Zaloguj się
• lub
• Zarejestruj się

Dobrze następnie możemy zmienić tło które jest pod paskiem i możemy go dostosować do swojej strony my ustawimy #1c1c1c

To jest ukryta treść, proszę

• Zaloguj się
• lub
• Zarejestruj się

A następnie ustawimy kolor samego paska

To jest ukryta treść, proszę

• Zaloguj się
• lub
• Zarejestruj się

I cały nasz kod wygląda następująco

To jest ukryta treść, proszę

• Zaloguj się
• lub
• Zarejestruj się

 

 

Teraz porozmawiajmy o strzałkach, możemy je dodać do naszego paska lecz żeby to ładnie wyglądało i kolor tła mamy inny niż biały to zmieńmy najpierw tło pod strzałkami

To jest ukryta treść, proszę

• Zaloguj się
• lub
• Zarejestruj się

I teraz dodajmy strzałkę w górę w pasku pionowym

To jest ukryta treść, proszę

• Zaloguj się
• lub
• Zarejestruj się

Następnie strzałka w dół

To jest ukryta treść, proszę

• Zaloguj się
• lub
• Zarejestruj się

 

To teraz pasek poziomy zmieniamy vertical na horizontal

To jest ukryta treść, proszę

• Zaloguj się
• lub
• Zarejestruj się

I w prawo

To jest ukryta treść, proszę

• Zaloguj się
• lub
• Zarejestruj się

 

Mam nadzieję że Wam się to przyda i że napisałem wszystko, lecz jeżeli coś pominąłem to bez problemu napisz i dodam to

[abbadon12]

Coś za bardzo brzmi jak film pana Zelenta :P

[maxaz]

I teraz dodajmy strzałkę w górę w pasku pionowym

body::-webkit-scrollbar-button:vertical:decrement{
	background: url(img/up.png) no-repeat;
}

 

Podałbyś jakiś link do tych up/down.png, czy coś.

[AlexsanderARG]

@maxaz

Można używać różnych - dogodnych dla siebie i pasujących do wyglądu

Można skorzystać np. z 

To jest ukryta treść, proszę

• Zaloguj się
• lub
• Zarejestruj się

[maxaz]

To może dopisz, że obrazki trzeba sobie pobrać samemu, bo jak na razie to z postu to nie wynika.

[Jakub]

Nie zadziała na FF/IE/Edge. Jak już jest mus to lepiej napisać własny scrollbar lub użyć gotowego lib'a.