CSS ' preliv ” Lastnost se uporablja za nadzor nad prelivanjem vsebine za izbrani element HTML. Vsebino je mogoče nadzorovati v določeni smeri s pomočjo “ overflow-y « in » prelivanje-x ” lastnosti. Lastnost »overflow« sprejema vrednosti, kot je » drsite ”, “ viden ”, “ skrit « in » avto ” in se med seboj razlikujejo po funkcionalnosti. Vendar ta vodnik na praktičnih primerih prikazuje razliko med overflow:scroll in overflow:auto.
Kako se overflow:scroll razlikuje od overflow:auto?
Glavna razlika med ' drsite « in » avto 'vrednosti je, da' overflow:scroll ” vedno prikazuje drsni trak, ne glede na to, ali je potreben ali ne, kar ustvarja vizualno motnjo. Po drugi strani pa ' preliv: avto ” prikaže samo drsni trak, ko je vsebina prepolnjena. Na ta način je mogoče ustvariti čistejši in bolj poenostavljen dizajn, ki zlahka pritegne pozornost uporabnika.
Primer 1: Uporaba lastnosti overflow:scroll
CSS ' overflow:scroll ” lastnost privzeto nastavi drsni trak za nadzor nad vsebino, ki se preliva. Ne vidi prelivajoče se vsebine in nato uporabi drsni trak. Namesto tega prikaže vodoravni in navpični drsni trak po kompilaciji kode, vendar lahko uporabnik spremeni in prikaže samo stranski drsni trak v skladu z zahtevami zasnove.
Obiščite spodnjo kodo, da uporabite lastnost »overflow:scroll«:
< div >
< h3 > Primer za Overflow:scroll h3 >
< div razred = 'scrollBox drsenje' >
< str > To je le uporabljena navidezna vsebina za predstavitev razlike med drsenjem vrednosti lastnosti overflow-y in samodejnim.
str >
div >
div >
V zgornjem kodnem bloku:
- Prvič, koren ' div ' je ustvarjen element in uporablja ugnezdeni ' ” v njem.
- Nato dodelite razrede » scrollingBox « in » drsite ' na že ustvarjeno ugnezdeno '
' oznaka.- Nazadnje posredujte navidezne podatke » « in » ' oznake znotraj ' div ” elementi.
Po izdelavi strukture HTML uporabite lastnost prelivanja CSS:
< stil >
.scrollingBox {
širina: 300px;
višina: 150px;
obroba: 1px polna temno siva;
}
.scroll {
prelivanje: drsenje;
}
stil >Opis zgornje kode CSS:
- Najprej izberite » scrollingBox ' in navedite vrednosti ' 300 slikovnih pik ”, “ 150 slikovnih pik « in » 1px trdna temno siva »v CSS« premer ”, “ višina «, in » meja ” lastnosti. Te lastnosti se uporabljajo za boljši proces vizualizacije.
- Nato je ' drsite ' je izbran razred in vrednost ' drsite ' se posreduje CSS ' preliv ” lastnina.
Po koncu faze kompilacije:
Zgornji izhod kaže, da vsebina ni prepolna, vendar je bil drsni trak dodan na osi X in Y.
Primer 2: Uporaba lastnosti overflow:auto
Lastnost overflow:auto je podobna lastnosti overflow:scroll, ker lahko obe prikažeta drsni trak. Edina razlika je v tem, da ' preliv: avto ” doda drsni trak, ko je vsebina prepolna in če vsebina ni prepolnjena, se drsni trak ne doda. Večinoma se uporablja pri izdelavi odzivnega spletnega oblikovanja zaradi svoje dinamično spreminjajoče se narave.
Na primer, obiščite spodnjo kodo:
< div razred = 'samodejni primer' >
< h3 > Primer za Prelivanje: samodejno h3 >
< div razred = 'scrollbox' stil = 'overflow: auto' >
< str > To je le uporabljena navidezna vsebina za predstavitev razlike med drsenjem vrednosti lastnosti overflow-y in samodejnim.
str >
div >
div >V zgornjem kodnem bloku:
- Prvič, uporabljena je ista struktura HTML in navidezni podatki, posredovani » h3 «, in » str ” je spremenjen.
- Nato je ' stil ' se uporablja z notranjim ugnezdenim ' div ' in nastavi vrednost ' avto »v CSS« preliv ” lastnina.
Po izvedbi je “ div ” element je zdaj videti takole:
Zgornji posnetek prikazuje, da drsni trak ni dodan glede na dolžino vsebine.
Zdaj pa samo za malo več pojasnila o ' preliv: avto ” lastnina. Poskusite zagotoviti veliko količino podatkov v ugnezdeni ' div ” element. Po posodobitvi kode je spletna stran videti takole:
Izhod potrjuje, da je drsni trak zdaj dodan zaradi prisotnosti prelivajoče se vsebine.
Zaključek
' overflow:scroll « in » preliv: avto ” Lastnosti se razlikujejo v situaciji, ko dodajo drsni trak. »Overflow:scroll« vedno prikazuje drsni trak, ne glede na to, ali je vsebina prelita ali ne. Medtem ko »overflow:auto« prikazuje samo drsni trak, ko je vsebina izbranega elementa HTML prepolna. Vrednost CSS “ preliv ” Lastnost je odvisna od posebne zasnove in zahtev uporabniške izkušnje. Ta članek je prikazal razliko med lastnostma »overflow:scroll« in »overflow:auto«.
- Nato dodelite razrede » scrollingBox « in » drsite ' na že ustvarjeno ugnezdeno '