Ez a cikk számos példával szemlélteti a CSS overflow-y tulajdonság használatát.
Hogyan kell használni az Overflow-y tulajdonságot a CSS-ben?
A CSS' túlcsordulás-y ” tulajdonság a tartalom túlcsordulásának szabályozására szolgál az elemen belüli kereszttengely mentén. Meghatározza, hogy kivágja-e a tartalmat, vagy adjon hozzá egy görgetősávot, ha a tartalom meghaladja a tároló magasságát. Ennek a tulajdonságnak a lehetséges értékei a következők: látható ”, „ rejtett ”, „ tekercs ”, és „ auto ”.
Nézzük meg az alábbi példákat az overflow-y tulajdonság jobb bemutatásához:
1. példa: A Visible használata az overflow-y tulajdonság értékeként
A ' látható ” érték lehetővé teszi, hogy a tartalom túlcsorduljon a tárolóból, és nem ad hozzá vágó- vagy görgetősávokat. Látogassa meg az alábbi gyakorlati kódblokkot:
>
>
>
A fenti kódblokk leírása:
- Először adjon hozzá egy értéket: ' szülő ' hoz ' osztály ” attribútumot, és használja a „ stílus ' tulajdonság.
- Ezenkívül adja meg a „ látható 'a CSS-hez' túlcsordulás-y ' ingatlan. És állítsa egyenlőnek a ' stílus ” attribútumot, hogy a CSS stílus működjön.
- Ezután hozzon létre egy beágyazott ' div ' elemet, és rendeljen hozzá egy '' osztályt gyermekTartalom ”. Adjon meg áladatokat is.
Most használja a CSS tulajdonságait a vizualizáció javítására, ami segít a CSS overflow-y tulajdonság jobb megértésében:
.szülő {szélesség : 200 képpont ;
magasság : 150 képpont ;
határ : 1 képpont szilárd fekete ;
}
.childContent {
magasság : 300 képpont ;
háttérszín : világoskék ;
}
A CSS-tulajdonságok leírása az alábbiakban található:
- Először is a „ szülő ' osztály van kiválasztva, és a ' 200 képpont ”, „ 150 képpont ”, és „ 1px tömör fekete ' vannak hozzárendelve a CSS-hez' szélesség ”, „ magasság ”, és „ határ ” tulajdonságait, ill.
- Ezután válassza ki a „ gyermekTartalom ” osztályba, és állítsa be a „ 300 képpont ” és „ világoskék 'a CSS-hez' magasság ” és „ háttérszín ” tulajdonságait, ill. Ez az osztály kibővül a „ szülő 'osztály, amelyet a CSS vezérel' túlcsordulás ' ingatlan.
A kódrészletek összeállítása után a weboldal így néz ki:
A pillanatkép azt mutatja, hogy a túlcsordulási tartalom már látható, és a görgetősáv vagy a kivágás alapértelmezés szerint nincs hozzáadva.
2. példa: Rejtett használata a túlcsordulás-y tulajdonság értékeként
A ' túlcsordulás-y ' ingatlan ' értékkel rejtett ” elrejti az összes tartalmat, amely a szülőtárolóján kívülre kerül. Ez a tulajdonság nem ad hozzá görgetősávokat, hanem levágta a túlcsordult tartalmat:
>
>
A fenti kódrészlet a következőket tartalmazza:
- Először ugyanazt a kódot illesztjük be ismét, a belső div elemben elhelyezett áltartalom növekedésével.
- Ezután módosítsa a ' túlcsordulás-y ' tulajdona ' rejtett ' hoz ' ' címke, amelynek osztálya ' szülő ”.
Az újbóli megjelenítés után a weboldal így néz ki:
A pillanatfelvétel azt mutatja, hogy a túlcsordulási tartalom le lett vágva.
3. példa: Scroll használata az Overflow-y tulajdonság értékeként
A „ túlcsordulás-y ' ingatlan a ' tekercs ” lehetővé teszi a végfelhasználó számára, hogy lapozzon a
tartalom, amely túlcsordul rajta. Nézzük meg az alábbi kódblokkot:
= 'szülő' stílus = 'overflow-y: scroll;' >
= 'gyermek tartalom' > Ez csak duma tartalom a túlcsordulás-y tulajdonság demonstrálására használják, ha láthatóra van állítva. Ez csak duma tartalom a túlcsordulás-y tulajdonság demonstrálására használják, ha láthatóra van állítva.
>
>A fenti kódblokkban:
- Először is ugyanaz a HTML-struktúra került be a „
” címke. - Ezután módosítsa a ' túlcsordulás-y ' ingatlan a ' tekercs ”. Ez lehetővé teszi a „ szülő ” div, hogy engedélyezze a görgetési effektust a túlcsordult tartalom szabályozásához.
A fenti kódblokk összeállítása után a weboldal így néz ki:
A fenti gid azt szemlélteti, hogy a görgetési effektus elérhető a túlcsordult tartalom szabályozására.
4. példa: Auto használata a túlcsordulás-y tulajdonság értékeként
Ebben a példában a felhasználók csak akkor adhatnak hozzá görgetősávot, ha a tartalom nem fér el a tárolóban. Továbbá, ha a tartalom nem túlcsordul, a görgetősáv nem kerül hozzáadásra. Ez lehetséges a „ auto 'a CSS-hez' túlcsordulás-y ' ingatlan:
= 'szülő' stílus = 'overflow-y: auto;' >
= 'gyermek tartalom' > Ez csak duma tartalom a túlcsordulás-y tulajdonság demonstrálására használják, ha láthatóra van állítva. Ez csak duma tartalom a túlcsordulás-y tulajdonság demonstrálására használják, ha láthatóra van állítva.
>
>A fenti kódblokkban:
- Először illessze be ugyanazt a HTML-fájlt a „
” címke. - Ezután frissítse a „ túlcsordulás-y ' tulajdona ' auto ”. Lehetővé teszi a görgetés hatását a tartalom függőleges hosszához képest.
Az összeállítási folyamat befejezése után a weboldal így működik:
A fenti gif a tartalom hosszának megfelelően megjeleníti azt a túlcsordulási tulajdonságot, amely engedélyezte a görgetősávot.
Következtetés
A CSS' túlcsordulás-y ” tulajdonság a túlcsordult tartalom szabályozására szolgál az elemen belüli kereszttengely mentén. A túlcsordulás-y tulajdonság a tartalmat az y-túlcsordulás tulajdonságainak adott értéknek megfelelően szabályozza. A ' vizuális ' érték a túlcsordult tartalmat jeleníti meg, a ' rejtett ' érték elrejti a túlcsordulás tartalmat, és a ' tekercs ” érték egy görgetősávot ad hozzá a tartalom vezérléséhez. És ha az érték ' auto ” a görgetősáv a tartalom hosszának megfelelően hozzáadja vagy eltávolítja.
- Először is ugyanaz a HTML-struktúra került be a „