Tento článok demonštruje použitie vlastnosti CSS overflow-y na mnohých príkladoch.
Ako používať vlastnosť Overflow-y v CSS?
CSS ' pretekať-y ” vlastnosť sa používa na ovládanie pretečenia obsahu pozdĺž krížovej osi v rámci prvku. Určuje, či sa má obsah orezať alebo pridať posúvač, keď obsah presahuje výšku kontajnera. Možné hodnoty pre túto vlastnosť sú „ viditeľné “, “ skryté “, “ rolovať “ a „ auto “.
Pozrime sa na nižšie uvedené príklady pre lepšiu demonštráciu vlastnosti overflow-y:
Príklad 1: Použitie Viditeľného ako hodnoty pre vlastnosť Overflow-y
' viditeľné ” umožňuje pretečeniu obsahu z kontajnera a nepridáva žiadne orezové ani posuvné lišty. Navštívte nižšie uvedený praktický blok kódu:
>
>
>
Popis vyššie uvedeného bloku kódu:
- Najprv priraďte hodnotu „ rodič “ na “ trieda “ a použite „ štýl “.
- Okrem toho uveďte hodnotu „ viditeľné “ do CSS “ pretekať-y ' nehnuteľnosť. A nastavte ho na hodnotu „ štýl “, aby štýl CSS fungoval.
- Ďalej vytvorte vnorené „ div ” a priraďte mu triedu “ obsah dieťaťa “. Poskytnite mu tiež fiktívne údaje.
Teraz použite vlastnosti CSS na zlepšenie vizualizácie, čo pomáha lepšie pochopiť vlastnosť CSS overflow-y:
.rodič {šírka : 200 pixelov ;
výška : 150 pixelov ;
hranica : 1px pevný čierna ;
}
.childContent {
výška : 300 pixelov ;
farba pozadia : svetlo modrá ;
}
Popis vlastností CSS je uvedený nižšie:
- Po prvé, „ rodič “ je vybratá trieda a hodnoty “ 200 pixelov “, “ 150 pixelov “ a „ 1px plná čierna ” sú priradené k CSS “ šírka “, “ výška “ a „ hranica “ vlastnosti, resp.
- Ďalej vyberte „ obsah dieťaťa ” a nastavte hodnoty “ 300 pixelov “ a „ svetlo modrá “ do CSS “ výška “ a „ farba pozadia “ vlastnosti, resp. Táto trieda je rozšírená na „ rodič ” trieda, ktorá je riadená CSS “ pretečeniu ' nehnuteľnosť.
Po kompilácii útržkov kódu vyzerá webová stránka takto:
Snímka zobrazuje, že obsah pretečenia bol teraz viditeľný a posúvač alebo výrez nie sú predvolene pridané.
Príklad 2: Použitie skrytých ako hodnoty pre vlastnosť Overflow-y
' pretekať-y “ nehnuteľnosť s hodnotou “ skryté ” skryje všetok obsah, ktorý sa presunie mimo svojho nadradeného kontajnera. Táto vlastnosť nepridáva posúvače, ale orezáva pretečený obsah:
>
>
Vyššie uvedený útržok kódu obsahuje:
- Najprv sa znova vloží rovnaký kód so zvýšeným obsahom fiktívneho obsahu umiestneným vo vnútri prvku div.
- Ďalej zmeňte hodnotu „ pretekať-y “vlastnosť na “ skryté “ na “ 'značka s triedou ' rodič “.
Po opätovnom vykreslení webová stránka vyzerá takto:
Snímka zobrazuje, že obsah pretečenia bol orezaný.
Príklad 3: Použitie rolovania ako hodnoty pre vlastnosť Overflow-y
Nastavenie hodnoty „ pretekať-y ” nehnuteľnosť do “ rolovať ” umožňuje koncovému užívateľovi prechádzať cez
obsah, ktorý ho preteká. Navštívme nižšie uvedený blok kódu:
= 'rodič' štýl = 'overflow-y: scroll;' >
= 'obsah pre dieťa' > Toto je len figurína obsahu používa sa na demonštráciu vlastnosti overflow-y, keď je nastavená ako viditeľná. Toto je len figurína obsahu používa sa na demonštráciu vlastnosti overflow-y, keď je nastavená ako viditeľná.
>
>Vo vyššie uvedenom bloku kódu:
- Po prvé, rovnaká štruktúra HTML bola vložená do „ ” tag.
- Ďalej zmeňte hodnotu „ pretekať-y ” nehnuteľnosť do “ rolovať “. To umožňuje „ rodič ” div, aby ste povolili efekt rolovania na ovládanie pretečeného obsahu.
Po kompilácii vyššie uvedeného bloku kódu sa webová stránka zobrazí takto:
Vyššie uvedený gid ilustruje, že na ovládanie pretečeného obsahu bol k dispozícii efekt rolovania.
Príklad 4: Použitie Auto ako hodnoty pre vlastnosť Overflow-y
V tomto príklade môžu používatelia pridať posúvač, iba ak sa obsah nezmestí do kontajnera. Ak obsah nepreteká, posúvač sa nepridá. Je to možné zadaním hodnoty „ auto “ do CSS “ pretekať-y ' nehnuteľnosť:
= 'rodič' štýl = 'overflow-y: auto;' >
= 'obsah pre dieťa' > Toto je len figurína obsahu používa sa na demonštráciu vlastnosti overflow-y, keď je nastavená ako viditeľná. Toto je len figurína obsahu používa sa na demonštráciu vlastnosti overflow-y, keď je nastavená ako viditeľná.
>
>Vo vyššie uvedenom bloku kódu:
- Najprv vložte rovnaký súbor HTML do súboru „ ” tag.
- Ďalej aktualizujte hodnotu „ pretekať-y “vlastnosť na “ auto “. Umožňuje efekt posúvania vzhľadom na vertikálnu dĺžku obsahu.
Po ukončení procesu kompilácie webová stránka funguje takto:
Vyššie uvedený gif zobrazuje vlastnosť overflow, ktorá povolila posuvník podľa dĺžky obsahu.
Záver
CSS ' pretekať-y Vlastnosť ” sa používa na ovládanie pretečeného obsahu pozdĺž krížovej osi v rámci prvku. Vlastnosť overflow-y riadi obsah podľa špecifickej hodnoty poskytnutej vlastnostiam overflow-y. ' vizuálny ” zobrazuje pretečený obsah, “ skryté ” skryje obsah pretečenia a “ rolovať ” hodnota pridáva posúvač na ovládanie obsahu. A ak je hodnota „ auto ” posúvač pridáva alebo odoberá podľa dĺžky obsahu.