Jak na to – Vlastní posuvník
Přečtěte si, jak vytvořit vlastní posuvník pomocí CSS.
Vlastní posuvníky
Poznámka: Vlastní posuvníky nejsou podporovány ve Firefoxu nebo v Edge, předchozí verze 79.
Jak vytvořit vlastní posuvníky
Chrome, Edge, Safari a Opera podporují nestandardní ::-webkit-scrollbar
pseudo prvek, který nám umožňuje upravit vzhled posuvníku prohlížeče.
Následující příklad vytvoří tenký (10px široký) posuvník, který má šedou barvu stopy/pruhu a tmavě šedý (#888) úchyt:
Příklad
/* width */
::-webkit-scrollbar {
width: 10px;
}
/* Track */
::-webkit-scrollbar-track {
background: #f1f1f1;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #888;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #555;
}
Tento příklad vytvoří posuvník se stínem rámečku:
Příklad
/* width */
::-webkit-scrollbar {
width: 20px;
}
/* Track */
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px
grey;
border-radius: 10px;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: red;
border-radius: 10px;
}
Voliče posuvníku
U prohlížečů webkit můžete k přizpůsobení posuvníku prohlížeče použít následující pseudo prvky:
::-webkit-scrollbar
posuvníku.::-webkit-scrollbar-button
tlačítka na posuvníku (šipky směřující nahoru a dolů).::-webkit-scrollbar-thumb
přetahovací rolovací rukojeť.::-webkit-scrollbar-track
stopu (ukazatel průběhu) posuvníku.::-webkit-scrollbar-track-piece
dráha (progress bar) NENÍ zakryta rukojetí.::-webkit-scrollbar-corner
spodní roh posuvníku, kde se setkávají horizontální a vertikální posuvníky.::-webkit-resizer
přetahovací úchyt pro změnu velikosti, který se zobrazuje v dolním rohu některých prvků.