Lekce 3 - Změny vlastností posuvníků (scrollbarů) v CSS3

V předchozím kvízu, Kvíz - calc(), čítač a vlastnost content v CSS3, jsme si ověřili nabyté zkušenosti z předchozích lekcí.

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 {

}

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 418x (991 B)

Článek pro vás napsal Filip Opluštil

Uživatelské hodnocení:

38 hlasů

Aktivity