WebDev.wiki > Návody pro webmastery a vývojáře > Stylovaní scrollbaru

Stylovaní scrollbaru - Začínáme s HTML

vydáno: 08.07.2016, seriál: Začínáme s HTML

Toto je 16. díl seriálu Začínáme s HTML, pokud se dostatečně neorientujete, zkuste předchozí díl či díl první.

Scrollbar nebo-li posuvník je součástí většiny webů. Jsou situace, kdy se klasický vzhled nehodí a je proto dobré posuvník vzhledově přizpůsobit přes CSS. Stylování scrollbaru pro IE a pro prohlížeče s Webkit jádrem je rozdílné. Níže si ukážeme jak se styluje posuvník v IE a jak na Webkitu.

Internet Explorer

Pro stylování scrollbaru v IE využijeme css vlastnost scrollbar-konkretni-cast-posuvniku.

scrollbar-arrow-color: #barva; - barva šipek scrollbaru
scrollbar-track-color: #barva; - barva pozadí scrollbaru
scrollbar-face-color: #barva; - barva jezdce scrollbaru

V praktické ukázce můžete vidět příkad použití ( nezapomínejte prohlížet přes IE ):

Zobrazit ukázku

Ukázka:

CSS

body {
 min-height: 2000px;
}

*{
    scrollbar-track-color: #37c8ab;
    scrollbar-face-color: #b8ede2;
    scrollbar-arrow-color: #046c57;
}

p {
  font-size: 16px;
  text-align: justify;
  color: #000;
  font-family: arial;
}

Použité vlastnosti: min-height, font-size, text-align, color, font-family

HTML

<!DOCTYPE html>


<html lang="cs-CZ">

<head>

<meta charset="utf-8">

<title>Stylování scrollbaru v IE</title>

</head>

<body>

<p>Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru.</p>

</body>

</html>

Použité tagy: <html>, <head>, <meta>, <title>, <body>, <p>

Dále lze v IE stylovat barvy stínů a rámečků kolem jezdce scrollbar-shadow-color, barvu levé horní hrany posuvníku scrollbar-3dlight-color, stín pravé strany posuvníku a šipek scrollbar-darkshadow-color a stín levé a horní strany posuvníku scrollbar-darkshadow-color. Tyto vlastnosti se nemusí v nových verzích Internet Exploreru projevit.

Prohlížeče s Webkitovým jádrem

Webkitové jádro používají prohlížeče Chrome, Opera a Safari.

Posuvník se styluje opět rozdělený na několik různých částí a umožňuje větší úpravy než IE:

::-webkit-srollbar - tělo scrollbaru
::-webkit-scrollbar-thumb - jezdec scrollbaru
::-webkit-scrollbar-button - šipky pro posun scrollbaru
::-webkit-scrollbar-track - prostor mezi šipkami
::-webkit-scrollbar-track-piece - pozadí pod jezdcem scrollbaru
::-webkit-resize - roh, kterým se mění velikost
::-webkit-scrollbar-corner - roh mezi scrollbary

Využití v praxi si ukážeme v praktické ukázce:

Zobrazit ukázku

Ukázka:

CSS

body {
  height: 3500px;
  width: 2400px;
}

p {
  font-size: 16px;
  color: #000;
  text-align: justify;
}

::-webkit-scrollbar {
    width: 30px;
    height: 30px;
}

::-webkit-scrollbar-button {
    background: #15201e;
    border-radius: 10px;
}
 
::-webkit-scrollbar-track {
    background: #defff8;
    border-radius: 10px;
}
 
::-webkit-scrollbar-thumb {
    background: #37c8ab;
    border-radius: 10px;
}

::-webkit-scrollbar-corner {
    background: #075344;
}

Použité vlastnosti: height, width, font-size, color, text-align, background, border-radius

HTML

<!DOCTYPE html>

<html lang="cs-CZ">

<head>

<meta charset="utf-8">

<title>Stylování scrollbaru ve Webkitu</title>

</head>

<body>

<p>Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru. Dlouhý textový sloupec pro ukázku scrollbaru.</p>

</body>

</html>

Použité tagy: <html>, <head>, <meta>, <title>, <body>, <p>

Jak je vidět v ukázce, tak lze zakulacovat rohy a popř. přidávat stíny prvků a další vlastnosti.

Závěr

Asi Vás při ukázkách napadla věta a co FireFox? Bohužel ten stylování scrollbaru neumožňuje. Řešením napříč všemi prohlížeči je javascript. Na internetu jsou k dispozici knihovny ke stažení popř. si tuto funkci můžete napsat sami.

HTML: návody jak psát html tagy

CSS: návody na kaskádovité styly

Témata

Seriály

Stylovaní scrollbaru - Začínáme s HTML

Internet Explorer

Prohlížeče s Webkitovým jádrem

Závěr

Seriál Začínáme s HTML

Seznam všech článků seriálu: