Jak Přidat Posuvník

Obsah:

Jak Přidat Posuvník
Jak Přidat Posuvník

Video: Jak Přidat Posuvník

Video: Jak Přidat Posuvník
Video: Creating a Custom Scrollbar for the Web - CSS Tutorial 2024, Duben
Anonim

Posuvníky jsou svislé a vodorovné pruhy podél pravého (při psaní zleva doprava) a spodních okrajů okna nebo samostatné oblasti v okně, určené k pohybu obsahu svisle nebo vodorovně. Webové stránky používají k řízení jejich vzhledu a chování prvky CSS (Cascading Style Sheets) vložené do HTML.

Jak přidat posuvník
Jak přidat posuvník

Instrukce

Krok 1

Značku div použijte, pokud chcete, aby posuvník nebyl pro celou stránku, ale pouze pro její omezenou oblast. V HTML (HyperText Markup Language) se „tagy“vztahují k jednotlivým příkazům prohlížeče k zobrazení konkrétního prvku stránky. Ve své nejjednodušší formě je značka div (často označovaná jako „vrstva“) napsána takto:

Toto je text uvnitř vrstvy

Zde je otevírací značka a uzavírací značka. Vše, co je umístěno mezi otevírací a zavírací značku, je ve vrstvě jako v kontejneru a tento kontejner lze dimenzovat - šířku a výšku. To se provádí pomocí doplňkového stylu („atributu“) stylu, který by měl být přidán do úvodní značky:

Toto je text uvnitř vrstvy

Krok 2

Zahrnout do atributu stylu tagu div a pravidel pro posuvníky vrstvy také:

Toto je text uvnitř vrstvy

Zde overflow: auto znamená, že posuvníky se zobrazí automaticky, to znamená, když se obsah vrstvy nevejde do zadaných rozměrů. Pokud je auto nahrazeno rolováním, budou tyto pruhy vždy přítomné, bez ohledu na to, zda jsou potřeba nebo ne. Skrytá hodnota bude mít opačný účinek - svitek se nikdy neobjeví, i když obsah tohoto kontejneru není viditelný za jeho okraji.

Krok 3

Podobnou metodou přidejte na stránku jako celek posuvníky. Ve výchozím nastavení se zobrazují podle potřeby, ale pokud z nějakého důvodu existuje potřeba jejich stálé přítomnosti na stránce, mělo by být do zdrojového html kódu přidáno odpovídající pravidlo stylu. V kódu stránky najděte závěrečnou značku záhlaví dokumentu a před ni napište tyto pokyny ke stylu:

body {overflow: scroll;}

Doporučuje: