Hogyan lehet html görgetés egy div CSS segítségével, web-fejlesztés
Néhány diák felmerült a kérdés, hogyan kell csinálni a html görgetés egységet. Vizsgáljuk meg ezt az egyszerű kérdést, különböző szögekből a példa egy div szöveges hal.
Tegyük fel, hogy a html-blokk, például div, ahol van bizonyos mennyiségű tartalmat. Lássuk, amely esetben ez lesz a görgetés.
Tegyük fel, hogy van egy div (lásd hogyan úgy, hogy megjeleníti görgetés), lásd blokk html-kód alatti .:
Alapértelmezésben a készülék nyúlik teljes szélességében a tartályba, és kifeszített magas, attól függően, hogy a méret a tartalom:
Veryveryveryverylongword-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed ne eiusmod Tempor incididunt ut labore et dolore magna aliqua.
Most, hogy a fix szélessége és magassága a html div-ben:
FYI: Az olvashatóság, a cikk a listát a kód helyett text-hal, írok ellipszis.
Fix méretek viselkedése a lent látható módon: div korlátozott méretűek, de a tartalom meghaladja azt, és még ma is láthatók a függőleges és vízszintes irányban, ha van szó, hogy nem lehet átvinni. . Lásd a következő példát:
Veryveryveryverylongword-Lorem Ipsum dolor sit amet, consectetur adipiscing elit, sed ne eiusmod Tempor incididunt ut labore et dolore magna aliqua.
A böngésző megjeleníti html hiszen a fentiekből kiderül, mert az ingatlan túlfolyó blokk div alapértelmezett beállítás látható. Ez minden, ami kitölti a blokk méretét - marad feltűnő. Nézzük próbálja megváltoztatni az értéket a css-tulajdonság a rejtett és meglátjuk, mi történik:
Veryveryveryverylongword-Lorem Ipsum dolor sit amet, consectetur adipiscing elit, sed ne eiusmod Tempor incididunt ut labore et dolore magna aliqua.
De, hála Istennek, a css is lehetséges, hogy a div html megjelenítéséhez ebben az esetben görgetést. Ehhez a változó értéke a túlfolyó automatikus. Lássuk, hogyan néz ki:
Veryveryveryverylongword-Lorem Ipsum dolor sit amet, consectetur adipiscing elit, sed ne eiusmod Tempor incididunt ut labore et dolore magna aliqua.
Az ingatlan értéke túlfolyó auto azt jelzi, hogy a böngésző megjeleníti a lapozást vezérlő csak akkor, ha szükség van rá, ha nem - nem lesz még egy csipetnyi görgetést. Nézzük eltávolítani szinte az összes tartalom és látni:
Van egy másik értéke a túlfolyó - tekercset. Azt mondja a böngészőnek, hogy a DIV-és a megjeleníteni kívánt görgetés, akkor is, ha a tartalom nem elég. Ebben az esetben a görgetés egyszerűen kimutatható inaktív. Lásd:
Amikor a megfelelő mennyiségű tartalom a tartályban div, görgetés aktív és pontosan úgy működik, mint abban az esetben az auto. Lásd a példát:
Veryveryveryverylongword-Lorem Ipsum dolor sit amet, consectetur adipiscing elit, sed ne eiusmod Tempor incididunt ut labore et dolore magna aliqua.
Ez minden alapvető információt kezelni görgetés-edik blokk html div CSS segítségével. Ügyeljen arra, hogy a css-túlcsordulás ingatlan-x és túlfolyó-y (ezek a tulajdonságok végre CSS3). Ők ellenőrzik a viselkedését div túlcsordulás tartalom x és y tengelyek rendre külön-külön.