Aktuálně: Postihly zákazy tvou profesi? Poptávka po ajťácích prudce roste, využij slevové akce 30% výuky zdarma!
Pouze tento týden sleva až 80 % na e-learning týkající se PHP
PHP týden

Lekce 14 - 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 50x (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
Článek pro vás napsal Filip Opluštil
Avatar
Jak se ti líbí článek?
Ještě nikdo nehodnotil, buď první!
Aktivity (4)

 

 

Komentáře

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.

Zatím nikdo nevložil komentář - buď první!