Od provozovatele projektu Rychlost.CZ

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;
}
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