Ez a cikk bemutatja azt a módszert, amellyel megakadályozhatja a tartalom túlcsordulását, és engedélyezheti a görgetést CSS használatával.
Hogyan lehet megállítani a tartalom túlcsordulását és engedélyezni a görgetést?
A tartalom túlcsordulásának megakadályozása az, hogy a tartalom elférjen a tárolójában, és ne befolyásolja negatívan a webhely teljesítményét. Könnyen megértheti a kontextust, és javíthatja a hozzáférést a felhasználók számára. A részletes magyarázat érdekében egy példán keresztül beszéljük meg:
1. lépés: Engedélyezze a görgetést a tartalomtúlcsordulással
Kezdetben hozzon létre egy táblázatot a HTML-fájlban, amelyen a görgetési hatás érvényesül. Tételezzük fel, hogy a táblázat már létrejött, hat sorból és hét oszlopból áll, és néhány áladatot adunk hozzá:
< asztal >
< tr >
< th > Fej 1 < / th >
< th > 2. fej < / th >
< th > Fej 3 < / th >
< th > Fej 4 < / th >
< th > Fej 5 < / th >
< th > Fej 6 < / th >
< th > Fej 7 < / th >
< / tr >
< tr >
< td > 1. sor < / td >
< td > 1. sor < / td >
< td > 1. sor < / td >
< td > 1. sor < / td >
< td > 1. sor < / td >
< td > 1. sor < / td >
< td > 1. sor < / td >
< / tr >
< tr >
< td > 2. sor < / td >
< td > 2. sor < / td >
< td > 2. sor < / td >
< td > 2. sor < / td >
< td > 2. sor < / td >
< td > 2. sor < / td >
< td > 2. sor < / td >
< / tr >
< tr >
< td > 3. sor < / td >
< td > 3. sor < / td >
< td > 3. sor < / td >
< td > 3. sor < / td >
< td > 3. sor < / td >
< td > 3. sor < / td >
< td > 3. sor < / td >
< / tr >
< tr >
< td > 4. sor < / td >
< td > 4. sor < / td >
< td > 4. sor < / td >
< td > 4. sor < / td >
< td > 4. sor < / td >
< td > 4. sor < / td >
< td > 4. sor < / td >
< / tr >< tr >
< td > 5. sor < / td >
< td > 5. sor < / td >
< td > 5. sor < / td >
< td > 5. sor < / td >
< td > 5. sor < / td >
< td > 5. sor < / td >
< td > 5. sor < / td >
< / tr >
< tr >
< td > 6. sor < / td >
< td > 6. sor < / td >
< td > 6. sor < / td >
< td > 6. sor < / td >
< td > 6. sor < / td >
< td > 6. sor < / td >
< td > 6. sor < / td >
< / tr >
< / asztal >
A fenti kódrészlet végrehajtása után a weboldal így jelenik meg:
A kimenet azt mutatja, hogy a táblázat adatai kevésbé olvasható formátumban vannak, és sok helyet foglal el a tábla.
2. lépés: Túlcsordulás és görgetési hatás beállítása A fenti kódrészletben: A fenti kódrészlet végrehajtása után a weboldal így jelenik meg: A weboldal szemlélteti, hogy a táblázat kevesebb helyet foglal, és megakadályozza a tartalom túlcsordulását. Ezenkívül a görgetési effektus engedélyezve van. jegyzet : A beállítással ' túlcsordulás: auto ” vagy „ túlcsordulás: görgetés ”, a felhasználók engedélyezhetik a görgetést túlcsorduló tartalom esetén. Emellett a „ túlcsordulás: rejtett ” használható a túlcsordulás teljes megelőzésére. A „túlcsordulás-x” és „túlcsordulás-y” tulajdonságok a túlcsordulás szabályozására és a vízszintes és függőleges tengelyen történő görgetés engedélyezésére szolgálnak. Megakadályozza a tartalom túlcsordulását, és lehetővé teszi a görgetést, hogy interaktív, reszponzív kialakítást hozzon létre minden eszközön. Ez a cikk bemutatja, hogyan állíthatja meg a tartalom túlcsordulását, és hogyan engedélyezheti a görgetést a CSS használatával.
Ezután tekerje be az asztalt egy szülővel
.túlcsordulás {
szélesség : 200 képpont ;
magasság : 200 képpont ;
túlcsordulás-x : auto ;
túlcsordulás-y : auto ;
scroll-viselkedés : sima ;
}
Következtetés