Tento článek ukazuje použití vlastnosti CSS overflow-y na mnoha příkladech.
Jak používat vlastnost Overflow-y v CSS?
CSS' přetečení-y ” vlastnost se používá k ovládání přetečení obsahu podél křížové osy v rámci prvku. Určuje, zda se má obsah oříznout nebo přidat posuvník, když obsah přesáhne výšku kontejneru. Možné hodnoty pro tuto vlastnost jsou „ viditelné “, “ skrytý “, “ svitek ', a ' auto “.
Pojďme se podívat na níže uvedené příklady pro lepší demonstraci vlastnosti overflow-y:
Příklad 1: Použití Visible jako hodnoty pro vlastnost Overflow-y
' viditelné ” umožňuje obsahu přetékat z kontejneru a nepřidává žádné výřezy ani posuvníky. Navštivte níže uvedený praktický blok kódu:
>
>
>
Popis výše uvedeného bloku kódu:
- Nejprve přiřaďte hodnotu „ rodič “ na “ třída ” a použijte “ styl ' atribut.
- Kromě toho uveďte hodnotu „ viditelné “ do CSS “ přetečení-y ' vlastnictví. A nastavte ji na hodnotu „ styl ”, aby styl CSS fungoval.
- Dále vytvořte vnořený „ div prvek a přiřaďte mu třídu ' obsah dítěte “. Poskytněte mu také fiktivní data.
Nyní využijte vlastnosti CSS k vylepšení vizualizace, která pomáhá lépe porozumět vlastnosti CSS overflow-y:
.rodič {šířka : 200 pixelů ;
výška : 150 pixelů ;
okraj : 1px pevný Černá ;
}
.childContent {
výška : 300 pixelů ;
barva pozadí : světle modrá ;
}
Popis vlastností CSS je uveden níže:
- Za prvé, „ rodič “ je vybrána třída a hodnoty “ 200 pixelů “, “ 150 pixelů ', a ' 1px plná černá “ jsou přiřazeny ke CSS “ šířka “, “ výška ', a ' okraj “ vlastnosti, resp.
- Dále vyberte „ obsah dítěte ” a nastavte hodnoty “ 300 pixelů ' a ' světle modrá “ do CSS “ výška ' a ' barva pozadí “ vlastnosti, resp. Tato třída je rozšířena na „ rodič “třída, která je řízena CSS” přetékat ' vlastnictví.
Po kompilaci úryvků kódu vypadá webová stránka takto:
Snímek zobrazuje, že obsah přetečení byl nyní viditelný a ve výchozím nastavení není přidán posuvník nebo oříznutí.
Příklad 2: Použití skrytých jako hodnoty pro vlastnost Overflow-y
' přetečení-y ' nemovitost s hodnotou ' skrytý ” skryje veškerý obsah, který se přesune mimo svůj nadřazený kontejner. Tato vlastnost nepřidává posuvníky, místo toho ořezává přetečený obsah:
>
>
Výše uvedený fragment kódu obsahuje:
- Nejprve se znovu vloží stejný kód se zvýšením fiktivního obsahu umístěného uvnitř vnitřního prvku div.
- Dále změňte hodnotu „ přetečení-y „vlastnost na“ skrytý “ na “ ” tag s třídou “ rodič “.
Po opětovném vykreslení webová stránka vypadá takto:
Snímek zobrazuje, že obsah přetečení byl oříznut.
Příklad 3: Použití rolování jako hodnoty pro vlastnost Overflow-y
Nastavení hodnoty „ přetečení-y „nemovitost do „ svitek ” umožňuje koncovému uživateli procházet
obsah, který ji přetéká. Pojďme navštívit níže uvedený blok kódu:
= 'rodič' styl = 'overflow-y: scroll;' >
= 'childContent' > Tohle je jen blbost obsah používá se k demonstraci vlastnosti overflow-y, když je nastavena na viditelnou. Tohle je jen blbost obsah používá se k demonstraci vlastnosti overflow-y, když je nastavena na viditelnou.
>
>Ve výše uvedeném bloku kódu:
- Nejprve byla stejná struktura HTML vložena do „ ” tag.
- Dále změňte hodnotu „ přetečení-y „nemovitost do „ svitek “. To umožňuje „ rodič ” div pro povolení efektu posouvání pro ovládání přetečeného obsahu.
Po kompilaci výše uvedeného bloku kódu vypadá webová stránka takto:
Výše uvedené schéma ukazuje, že pro ovládání přetečeného obsahu byl k dispozici efekt posouvání.
Příklad 4: Použití Auto jako hodnoty pro vlastnost Overflow-y
V tomto příkladu mohou uživatelé přidat posuvník pouze v případě, že se obsah nevejde do kontejneru. Pokud obsah nepřeteče, posuvník nebude přidán. Je to možné poskytnutím hodnoty „ auto “ do CSS “ přetečení-y ' vlastnictví:
= 'rodič' styl = 'overflow-y: auto;' >
= 'childContent' > Tohle je jen blbost obsah používá se k demonstraci vlastnosti overflow-y, když je nastavena na viditelnou. Tohle je jen blbost obsah používá se k demonstraci vlastnosti overflow-y, když je nastavena na viditelnou.
>
>Ve výše uvedeném bloku kódu:
- Nejprve vložte stejný soubor HTML do „ ” tag.
- Dále aktualizujte hodnotu „ přetečení-y „vlastnost na“ auto “. Umožňuje efekt rolování vzhledem k vertikální délce obsahu.
Po ukončení procesu kompilace webová stránka funguje takto:
Výše uvedený gif zobrazuje vlastnost přetečení, která povolila posuvník podle délky obsahu.
Závěr
CSS' přetečení-y ” vlastnost se používá k ovládání přetečeného obsahu podél křížové osy v rámci prvku. Vlastnost overflow-y řídí obsah podle konkrétní hodnoty poskytnuté vlastnostem overflow-y. ' vizuální ” zobrazuje přetečený obsah, “ skrytý Hodnota ” skryje obsah přetečení a hodnota “ svitek ” hodnota přidává posuvník pro ovládání obsahu. A pokud je hodnota „ auto ” posuvník přidává nebo odebírá podle délky obsahu.