Jak upravit nebo odstranit posuvník – posuvník CSS – Active-Vision
Stylizované posuvníky začínají být oblíbené, myslím, že jste již narazili na takové stránky, které mají unikátní posuvník (například naše stránky). Tento úkol lze provést dvěma způsoby: pomocí CSS3 nebo pomocí pluginu jQuery. Použijeme ten nejjednodušší – psát CSS styly.
Poznámka: stylování posuvníku pomocí předpony -webkit je možné pouze v prohlížečích, které používají vykreslovací jádro webový kit (a Blink). To znamená, že tato metoda nebude fungovat ve Firefoxu a IE.
Často je nutné zcela odstranit nebo skrýt posuvník CSS. Nejprve se podívejme, jak to udělat.
1 Jak odstranit posuvník CSS
Posuvník můžete skrýt buď pro jeden prvek na stránce, nebo pro celou stránku. Není to těžké, stačí napsat následující vlastnost:
CSS /*Убрать полосу прокрутки у элемента*/ .element::-webkit-scrollbar < width: 0; >/*Убрать полосу прокрутки для всей страницы*/ ::-webkit-scrollbar 2 Jak změnit CSS posuvníku
Nyní se podívejme na základní strukturu posuvníku:
-webkit-scrollbar se skládá z různých pseudoprvků.
- ::-webkit-scrollbar je pozadí samotného posuvníku.
- ::-webkit-scrollbar-button — směrová tlačítka na posuvníku.
- ::-webkit-scrollbar-track — prázdné místo pod indikátorem posouvání.
- ::-webkit-scrollbar-thumb – indikátor rolování, přetahovatelný prvek.
Pojďme se podívat, jak to celé funguje. Chcete-li zkusit změnit posuvník css, vytvořte prázdný dokument HTML. Musíte přidat style.css váš soubor HTML. Přidáme to do označení div s prvkem id, který má posuvník, který na něj aplikuje naše styly.
HTML Document 3 styly CSS
Aby prvek mohl div objevil se posuvník, přidejte následující vlastnosti.
CSS #element < overflow-y: scroll; background-color: #ffffff; width: 200px; height: 200px; >.overflow Nyní pomocí pseudoprvku vytvoříme vlastní posuvník. Výchozí šířku nahradíme novou – 7 pixelů. Poté přidejte barvu pruhu pomocí vlastnosti background-color: #f9f9fd .
Pokud chcete změnit šířku posouvání celé stránky, nikoli jednoho prvku, použijte ::-webkit-scrollbar bez přídavných voličů.
CSS #element::-webkit-scrollbar Šířka proužku je 7 pixelů
Již víme, že posuvník se skládá z proužku, tlačítka a indikátoru posuvu. Ke stylování indikátoru používáme pseudoelement ::-webkit-scrollbar-thumb.
CSS #element::-webkit-scrollbar-thumb Změňte barvu indikátoru
Pojďme přidat vlastnost box-shadow na pruh, abychom přidali kontrast posuvníku. Vhodný stín najdete v našem generátoru box-shadow.
CSS #element::-webkit-scrollbar-track Přidání vnitřního stínu
Nakonec je zde několik dalších možností, které můžete na svém webu použít.
Příklad 1
Příklad 2
Příklad 3
Příklad 4
Пример 1 #element::-webkit-scrollbar < width: 10px; background-color: #f9f9fd; >#element::-webkit-scrollbar-thumb < border-radius: 10px; background-color: #18aaaa; >#element::-webkit-scrollbar-track Пример 2 #element::-webkit-scrollbar < width: 10px; >#element::-webkit-scrollbar-track < -webkit-box-shadow: 5px 5px 5px -5px rgba(34, 60, 80, 0.2) inset; background-color: #f9f9fd; >#element::-webkit-scrollbar-thumb Пример 3 #element::-webkit-scrollbar < width: 10px; >#element::-webkit-scrollbar-track < -webkit-box-shadow: 5px 5px 5px -5px rgba(34, 60, 80, 0.2) inset; background-color: #f9f9fd; >#element::-webkit-scrollbar-thumb Ve čtvrtém příkladu použijeme gradient. Můžete si jej přizpůsobit v generátoru přechodů CSS.
Пример 4 #element::-webkit-scrollbar < width: 10px; >#element::-webkit-scrollbar-track < -webkit-box-shadow: 5px 5px 5px -5px rgba(34, 60, 80, 0.2) inset; background-color: #f9f9fd; border-radius: 10px; >#element::-webkit-scrollbar-thumb