14. diel - Zmeny vlastností posuvníkov (scrollbar)

V minulej lekcii, Počítanie v CSS pomocou funkcie calc () , sme si ukázali, čo je to funkcia calc(), ako funguje a tiež akým spôsobom sa využíva.

Vitajte u ďalšej lekcie ohľadom možnosťou nastavenia elementov v CSS3, v ktorej si ukážeme, ako si na stránke nastaviť vlastné posuvníky.

Čo sa v tejto lekcii naučíme vytvoriť?

Změny posuvníků

localhost

Zmena vzhľadu posuvníkov

Ďalšou veľmi užitočnou vlastnosťou CSS sú zmeny tvaru a farby posuvníkov, čiže scrollbar. Pri moderných webových stránok už rozhodne nechceme používať klasický vzhľad. Zápis v kóde je pomerne jednoduchý, aj keď sa trochu líši od ostatných vecí, ktoré sme sa už naučili. Vytvoríme si teda HTML stránku s nasledujúcim obsahom.

<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 teda základné element s triedou .box, a v ňom ďalšie štyri elementy s triedou .scrollbar, ktoré sú následne rozdelené jednotlivými identifikátory (id="styl01", ...). V nich sa potom nachádza ešte jeden element s triedou .force-overflow, ten je tam preto, aby nám vnútri scrollbar správne fungoval. Teraz je potrebné vytvoriť triedy v CSS a pridať im 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 teda triedu .box, tá nám definuje šírku podľa ľubovôle, aby sme mali všetko pekne vedľa seba. U triedy .scrollbar je najdôležitejšie nastavenie overflow-y: scroll;, Udáva nám totiž, ako sa bude zobrazovať element s triedou .force-overflow. Samozrejme nesmieme zabudnúť nastaviť tomuto elementu výšku height: 300px; a šírku width: 65px;. Zvyšok je už len pre lepšie zobrazenie, nie je pre funkčnosť nijak moc zásadný. Vnútri tohto elementu máme ďalší element s triedou .force-overflow, u ktorého si môžeme všimnúť, že má definovanú výšku height: 450px; schválne väčšie, aby sme ním mohli posúvať hore a dole. Nastavenie v elementu <body> je len pre lepšiu viditeľnosť toho, čo vytvárame. Ak sme sa niekde nepomýlili, výsledok by mal zatiaľ vyzerať nejako takto:

Změny posuvníků

localhost

Nie je to zatiaľ na prvý pohľad nič moc zvláštneho. Nastavíme teda jednotlivé scrollbar tak, aby sa trochu líšili farbou a tvarom. Prvý element zľava nemá žiadne id, necháme ho teda v pôvodnom zobrazení pre porovnanie. Upravíme nasledujúce element s id="styl01". Na to sa ale musíme pozrieť, ako sa vlastne takáto úprava správne zapisuje. Celkom možno u scrollbaru nastaviť 7 základných vecí. Všetky sa však používajú zriedka a my si ukážeme iba 3, ktoré sú naozaj nutné. Je tiež potrebné uviesť, že určité prehliadače tieto nastavenia nepodporujú, alebo vyžadujú špeciálne zápis. Ak však používate prehliadača Google Chrome, Mozilla Firefox alebo Opera, všetko by malo fungovať. Základom je pseudo-element ::-webkit-scrollbar. Ten sa potom rozširuje o ďalšie slovo, ktoré špecifikuje, čo presne chceme meniť. V našom prípade to budú ::-webkit-scrollbar-track a ::-webkit-scrollbar-thumb. K nášmu id="styl01" teda v CSS pridáme ::-webkit-scrollbar, ::-webkit-scrollbar-track a ::-webkit-scrollbar-thumb:

#styl01::-webkit-scrollbar {

}

#styl01::-webkit-scrollbar-track {

}

#styl01::-webkit-scrollbar-thumb {

}

V tejto chvíli je všetko pripravené, môžeme teda pridať nastavenie farby a veľkosti. Prvá časť (#styl01::-webkit-scrollbar) nastavuje posuvník samotný, nastavíme mu šírku, napríklad width: 10px;. Druhá časť (#styl01::-webkit-scrollbar-track) definuje pozadia posuvníka, čiže ten priestor, po ktorom sa posúva tlačidlo. Posledná časť (#styl01::-webkit-scrollbar-thumb) potom nastavuje vlastnosti posuvného tlačidla.

Skúsime zmeniť farbu dráhy na svetle modrú a farbu tlačidla na oranžovú:

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

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

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

Náš scrollbar by mal zmeniť farbu podľa zadania:

Změny posuvníků

localhost

U ďalšieho štýlu (#styl02) opäť zmeníme farbu podľa ľubovôle, a tentoraz pridáme tlačidle a dráhe vlastnosť 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čidlo aj dráha tak budú pekne zaguľatené:

Změny posuvníků

localhost

Teraz v ďalšom štýle (styl03) skúsime nastaviť okrem farby a zaoblenie tiež väčšiu šírku 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;
}

Ako môžeme vidieť, s veľkosťou scrollbaru by sa to nemalo príliš preháňať:

Změny posuvníků

localhost

U posledného štýlu (styl04) namiesto farby nastavíme obrázok:

#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ýsledok:

Změny posuvníků

localhost

Teraz si môžete na stránke urobiť scrollbar presne tak, ako chcete:)

Pridám tu ešte menšie vsuvku. Vytvárame tu niekoľko scrollbar na stránku a nemusí byť úplne jasné, ako ju zmeniť priamo na svojej stránke "globálne" (nie len na jedno miesto). Urobíme to tak, že identifikátor #styl01 atď. Nahradíme tagom body alebo html:

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

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

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

Vďaka tomu sa nám scrollbar prejaví na každom mieste na našej stránke, kde sa scrollbar má zobraziť.

Keby vám čokoľvek nešlo alebo nebolo jasné, môžete si stiahnuť všetky ukážky v prílohe nižšie:)

V ďalšej lekcii, Úpravy a nastavenia kurzorov v CSS3 , sa pozrieme na to, ako v CSS3 nastaviť vlastný vzhľad kurzora.

Stiahnuť

Stiahnutím nasledujúceho súboru súhlasíš s licenčnými podmienkami

Stiahnuté 418x (991 B)

Článok pre vás napísal Filip Opluštil

Užívateľské hodnotenie:

Ešte nikto nehodnotil, buď prvý!

Aktivity