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

body{

}

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

body::{

}

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

body::-webkit-scrollbar{

}

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

body::-webkit-scrollbar{
	width: 12px;
}

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

body::-webkit-scrollbar{
	width: 12px;
	height: 12px;
}

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

body::-webkit-scrollbar-track{
	background-color: #1c1c1c;
}

A następnie ustawimy kolor samego paska

body::-webkit-scrollbar-thumb{
	background-color: #1c74b2;
}

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

body::-webkit-scrollbar{
	width: 12px;
	height: 12px;
}

body::-webkit-scrollbar{
	background-color: #1c1c1c;
}

body::-webkit-scrollbar{
	background-color: #1c74b2;
}

 

 

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

body::-webkit-scrollbar-corner{
	background-color: #1c1c1c;
}

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

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

Następnie strzałka w dół

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

 

To teraz pasek poziomy zmieniamy vertical na horizontal

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

I w prawo

body::-webkit-scrollbar-button:horizontal:increment{
	background: url(img/right.png) no-repeat;
}

 

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 https://www.flaticon.com/

[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.