CSS' přetékat Vlastnost ” se používá k řízení přetečení obsahu pro vybraný prvek HTML. Obsah lze ovládat jedním konkrétním směrem pomocí „ přetečení-y ' a ' přetečení-x vlastnosti. Vlastnost „overflow“ přijímá hodnoty jako „ svitek “, “ viditelné “, “ skrytý ' a ' auto “ a vzájemně se liší funkčností. Tato příručka však na praktických příkladech ukazuje rozdíl mezi overflow:scroll a overflow:auto.
Jak se liší overflow:scroll od overflow:auto?
Hlavní rozdíl mezi „ svitek ' a ' auto „hodnoty je, že „ přetečení:scroll ” vždy zobrazuje posuvník, ať už je to potřeba nebo ne, což vytváří vizuální rozptýlení. Na druhou stranu, „ přetečení:auto ” zobrazí posuvník pouze při přetečení obsahu. Tímto způsobem lze vytvořit čistší a efektivnější design, který snadno upoutá pozornost uživatele.
Příklad 1: Použití vlastnosti overflow:scroll
CSS' přetečení:scroll Vlastnost ” nastavuje posuvník ve výchozím nastavení k ovládání přetečeného obsahu. Nevidí obsah přetečení a poté použije posuvník. Místo toho po kompilaci kódu zobrazí vodorovný a svislý posuvník, ale uživatel může upravit a zobrazit pouze boční posuvník podle požadavků návrhu.
Chcete-li použít vlastnost „overflow:scroll“, navštivte níže uvedený kód:
< div >
< h3 > Příklad pro Přetečení: rolování h3 >
< div třída = 'scrollBox scroll' >
< p > Toto je jen fiktivní použitý obsah pro ukázka rozdílu mezi hodnotou vlastnosti přetečení y scroll a auto.
p >
div >
div >
Ve výše uvedeném bloku kódu:
- Za prvé, kořen ' div 'prvek je vytvořen a využívá vnořený' “ tag v něm.
- Dále přiřaďte třídy „ rolovací pole ' a ' svitek “ do již vytvořeného vnořeného “
” tag.- Nakonec poskytněte fiktivní data do „ ' a ' “ tagy uvnitř “ div ' Prvky.
Po vytvoření struktury HTML použijte vlastnost CSS overflow:
< styl >
.scrollingBox {
šířka: 300px;
výška: 150px;
ohraničení: 1px plná tmavě šedá;
}
.svitek {
přetečení: rolovat;
}
styl >Popis výše uvedeného kódu CSS:
- Nejprve vyberte „ rolovací pole „třída a uveďte hodnoty „ 300 pixelů “, “ 150 pixelů ' a ' 1px plná tmavě šedá “ do CSS “ šířka “, “ výška ', a ' okraj vlastnosti. Tyto vlastnosti se využívají pro lepší proces vizualizace.
- Dále, „ svitek “ je vybrána třída a hodnota „ svitek “ je předán CSS “ přetékat ' vlastnictví.
Po skončení fáze kompilace:
Výše uvedený výstup ukazuje, že obsah nepřetéká, ale byl přidán posuvník na ose X i Y.
Příklad 2: Použití vlastnosti overflow:auto
Vlastnost overflow:auto je jako overflow:scroll, protože obě mohou zobrazit posuvník. Jediný rozdíl je v tom, že „ přetečení:auto ” přidá posuvník při přetečení obsahu a pokud obsah nepřeteče, posuvník se nepřidá. Nejvíce se využívá při tvorbě responzivního webdesignu kvůli jeho dynamicky se měnícímu charakteru.
Navštivte například níže uvedený kód:
< div třída = 'automatický příklad' >
< h3 > Příklad pro Přetečení: automatické h3 >
< div třída = 'rolovací pole' styl = 'přetečení: auto' >
< p > Toto je jen fiktivní použitý obsah pro ukázka rozdílu mezi hodnotou vlastnosti přetečení y scroll a auto.
p >
div >
div >Ve výše uvedeném bloku kódu:
- Nejprve je použita stejná struktura HTML a fiktivní data poskytnutá „ h3 ', a ' p “ prvky se změní.
- Dále, „ styl 'atribut se používá s vnitřním vnořeným' div ” a nastavuje hodnotu “ auto “ do CSS “ přetékat ' vlastnictví.
Po provedení „ div ” prvek nyní vypadá takto:
Výše uvedený snímek ukazuje, že posuvník není přidán podle délky obsahu.
Nyní jen pro trochu větší objasnění „ přetečení:auto ' vlastnictví. Zkuste poskytnout velké množství dat vnořenému „ div prvek. Po aktualizaci kódu vypadá webová stránka takto:
Výstup potvrzuje, že je nyní přidán posuvník kvůli přítomnosti přetečeného obsahu.
Závěr
' přetečení:scroll ' a ' přetečení:auto ” vlastnosti se liší v situaci, kdy přidávají posuvník. Pole „overflow:scroll“ vždy zobrazuje posuvník, ať už je obsah přetečený nebo ne. Zatímco „overflow:auto“ zobrazuje posuvník pouze v případě, že obsah vybraného prvku HTML přetéká. Hodnota CSS “ přetékat ” vlastnost závisí na konkrétním designu a požadavcích uživatelské zkušenosti. Tento článek demonstroval rozdíl mezi vlastnostmi „overflow:scroll“ a „overflow:auto“.
- Dále přiřaďte třídy „ rolovací pole ' a ' svitek “ do již vytvořeného vnořeného “