Pouze tento týden sleva až 80 % na e-learning týkající se Javy. A zároveň využij akce až 30 % zdarma při nákupu e-learningu - Více informací.
Hledáme koordinátorku kurzů a programátora, 100% home office, 100% flexibilní. Prozkoumej aktuální pozice
Java week

Lekce 11 - Změny vlastností posuvníků (scrollbarů)

V minulé lekci, Počítání v CSS pomocí funkce calc(), jsme si ukázali, co je to funkce calc(), jak funguje a také jakým způsobem se využívá.

Vítejte u další lekce ohledně možností nastavení elementů v CSS3, ve které si ukážeme, jak si na stránce nastavit vlastní posuvníky.

Co se v této lekci naučíme vytvořit?

Změny posuvníků
localhost

Změna vzhledu posuvníků

Další velice užitečnou vlastností CSS jsou změny tvaru a barvy posuvníků, neboli scrollbarů. U moderních webových stránek už rozhodně nechceme používat klasický vzhled. Zápis v kódu je poměrně jednoduchý, i když se poněkud liší od ostatních věcí, které jsme se již naučili. Vytvoříme si tedy HTML stránku s následujícím obsahem.

<div class="box">
  <br>
        <div class="scrollbar">
            <div class="force-overflow"></div>
        </div>

        <div class="scrollbar" id="styl01">
            <div class="force-overflow"></div>
        </div>

        <div class="scrollbar" id="styl02">
            <div class="force-overflow"></div>
        </div>

        <div class="scrollbar" id="styl03">
            <div class="force-overflow"></div>
        </div>

        <div class="scrollbar" id="styl04">
            <div class="force-overflow"></div>
        </div>
</div>

Máme tedy základní element s třídou .box, a v něm další čtyři elementy s třídou .scrollbar, které jsou následně rozděleny jednotlivými identifikátory (id="styl01",...). V nich se potom nachází ještě jeden element s třídou .force-overflow, ten je tam proto, aby nám uvnitř scrollbar správně fungoval. Teď je zapotřebí vytvořit třídy v CSS a přidat jim určité vlastnosti:

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  flex-direction: column;
}

.box {
  width: 500px;
}

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

.force-overflow {
  min-height: 450px;
}

Máme tedy třídu .box, ta nám definuje šířku dle libosti, abychom měli vše pěkně vedle sebe. U třídy .scrollbar je nejdůležitější nastavení overflow-y: scroll;, udává nám totiž, jak se bude zobrazovat element s třídou .force-overflow. Samozřejmě nesmíme zapomenout nastavit tomuto elementu výšku height: 300px; a šířku width: 65px;. Zbytek je už pouze pro lepší zobrazení, není pro funkčnost nijak moc zásadní. Uvnitř tohoto elementu máme další element s třídou .force-overflow, u kterého si můžeme všimnout, že má definovanou výšku height: 450px; schválně větší, abychom jím mohli posouvat nahoru a dolů. Nastavení v elementu <body> je pouze pro lepší viditelnost toho, co vytváříme. Pokud jsme se někde nepřepsali, výsledek by měl zatím vypadat nějak takto:

Změny posuvníků
localhost

Není to zatím na první pohled nic moc zvláštního. Nastavíme tedy jednotlivé scrollbary tak, aby se trochu lišily barvou a tvarem. První element zleva nemá žádné id, necháme ho tedy v původním zobrazení pro porovnání. Upravíme následující element s id="styl01". Na to se ale musíme podívat, jak se vlastně taková úprava správně zapisuje. Celkem lze u scrollbaru nastavit 7 základních věcí. Všechny se nicméně používají zřídka a my si ukážeme pouze 3, které jsou opravdu nutné. Je také nutno zmínit, že určité prohlížeče tato nastavení nepodporují, nebo vyžadují speciální zápis. Pokud však používáte prohlížeče Google Chrome, Mozilla Firefox nebo Opera, vše by mělo fungovat. Základem je pseudo-element ::-webkit-scrollbar. Ten se poté rozšiřuje o další slovo, které specifikuje, co přesně chceme měnit. V našem případě to budou ::-webkit-scrollbar-track a ::-webkit-scrollbar-thumb. K našemu id="styl01" tedy v CSS přidáme ::-webkit-scrollbar, ::-webkit-scrollbar-track a ::-webkit-scrollbar-thumb:

#styl01::-webkit-scrollbar {

}

#styl01::-webkit-scrollbar-track {

}

#styl01::-webkit-scrollbar-thumb {

}
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

V tuto chvíli je vše připraveno, můžeme tedy přidat nastavení barvy a velikosti. První část (#styl01::-webkit-scrollbar) nastavuje posuvník samotný, nastavíme mu šířku, například width: 10px;. Druhá část (#styl01::-webkit-scrollbar-track) definuje pozadí posuvníku, neboli ten prostor, po kterém se posouvá tlačítko. Poslední část (#styl01::-webkit-scrollbar-thumb) potom nastavuje vlastnosti posuvného tlačítka.

Zkusíme změnit barvu dráhy na světle modrou a barvu tlačítka na oranžovou:

#styl01::-webkit-scrollbar {
  width: 10px;
}

#styl01::-webkit-scrollbar-track {
  background-color: lightblue;
}

#styl01::-webkit-scrollbar-thumb {
  background-color: orange;
}

Náš scrollbar by měl změnit barvu dle zadání:

Změny posuvníků
localhost

U dalšího stylu (#styl02) opět změníme barvu dle libosti, a tentokrát přidáme tlačítku a dráze vlastnost border-radius: 10px;:

#styl02::-webkit-scrollbar {
  width: 10px;
}

#styl02::-webkit-scrollbar-track {
  background-color: rgb(94, 133, 250);
  border-radius: 10px;
}

#styl02::-webkit-scrollbar-thumb {
  background-color: blue;
  border-radius: 10px;
}

Tlačítko i dráha tak budou pěkně zakulacené:

Změny posuvníků
localhost

Nyní v dalším stylu (styl03) zkusíme nastavit kromě barvy a zaoblení také větší šířku width: 20px:

#styl03::-webkit-scrollbar {
  width: 20px;
}

#styl03::-webkit-scrollbar-track {
  background-color: rgb(195, 129, 129);
  border-radius: 10px;
}

#styl03::-webkit-scrollbar-thumb {
  background-color: rgb(214, 41, 41);
  border-radius: 10px;
}

Jak můžeme vidět, s velikostí scrollbaru by se to nemělo příliš přehánět:

Změny posuvníků
localhost

U posledního stylu (styl04) místo barvy nastavíme obrázek:

#styl04::-webkit-scrollbar {
  width: 15px;
}

#styl04::-webkit-scrollbar-track {
  background-color: gray;
  border-radius: 8px;
}

#styl04::-webkit-scrollbar-thumb {
  background-color: #FFF;
  border-radius: 8px;
  background-image: url('https://cdn.pixabay.com/photo/2019/05/18/13/34/branches-4211837_960_720.jpg');
}

Výsledek:

Změny posuvníků
localhost

Nyní si můžete na stránce udělat scrollbary přesně tak, jak chcete :)

Přidám tu ještě menší vsuvku. Vytváříme tady několik scrollbarů na stránku a nemusí být úplně jasné, jak ji změnit přímo na své stránce "globálně" (ne jen na jedno místo). Uděláme to tak, že identifikátor #styl01 atd. nahradíme tagem body nebo html:

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

body::-webkit-scrollbar-track {
    background-color: lightblue;
}

body::-webkit-scrollbar-thumb {
    background-color: orange;
}

Díky tomu se nám scrollbary projeví na každém místě na naší stránce, kde se scrollbar má zobrazit.

Kdyby vám cokoliv nešlo nebo nebylo jasné, můžete si stáhnout všechny ukázky v příloze níže :)

V další lekci, Úpravy a nastavení kurzorů v CSS3, se podíváme na to, jak v CSS3 nastavit vlastní vzhled kurzoru.


 

Stáhnout

Stažením následujícího souboru souhlasíš s licenčními podmínkami

Staženo 176x (991 B)

 

Předchozí článek
Počítání v CSS pomocí funkce calc()
Všechny články v sekci
CSS3 od A do Z
Přeskočit článek
(nedoporučujeme)
Úpravy a nastavení kurzorů v CSS3
Článek pro vás napsal Filip Opluštil
Avatar
Uživatelské hodnocení:
10 hlasů
Aktivity

 

 

Komentáře

Avatar
Tomáš Jakubec :7.12.2021 10:28

Zdravím, mám dotaz. Změna scrollbaru mi nefunguje ve Firexofu. Nefunguje jak v samotném článku, tak ani v mé vytvořené verzi. Používám verzi 94.0.2. Dle canIuse.com by mělo být podporováno. V Edge a Chrome funguje. Budu rád za odpověď, kde může být chybka.
Díky, Tom

 
Odpovědět
7.12.2021 10:28
Avatar
Filip Opluštil
Redaktor
Avatar
Odpovídá na Tomáš Jakubec
Filip Opluštil:8.12.2021 13:03

Zdravím, bohužel, Firefox je založen na trochu jiném základu než ostatní běžně používané prohlížeče, proto v něm ::-webkit-scrollbar nefunguje. Je potřeba elementu nastavit vlastnost scrollbar-color a scrollbar-width. Podrobné informace lze najít zde : https://stackoverflow.com/…-for-firefox
https://developer.mozilla.org/…it-scrollbar
https://developer.mozilla.org/…ollbar-color
V rámci lekcí se z hlediska úspory zaměřujeme především na řešení, která jsou podporována co největším počtem prohlížečů. :)

 
Odpovědět
8.12.2021 13:03
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
Odpovídá na Filip Opluštil
Tomáš Jakubec :9.12.2021 7:02

Filipe děkuji za vysvětlení a navedení na další zdroje. ;-)
Pohodový den

 
Odpovědět
9.12.2021 7:02
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 3 zpráv z 3.