Kako koristiti svojstvo Overflow-y u CSS-u?

CSS svojstvo overflow koristi se za kontrolu sadržaja overflow-a u elementu. Određuje treba li dodati trake za pomicanje ili prikazati sadržaj izvan spremnika elementa. Ovo svojstvo pomaže u poboljšanju korisničkog iskustva, omogućuje razvojnom programeru kontrolu izgleda stranice i pomaže u prilagođavanju ponašanja pojedinačnih elemenata na stranici.

Ovaj članak demonstrira korištenje CSS svojstva overflow-y s brojnim primjerima.

Kako koristiti svojstvo Overflow-y u CSS-u?

CSS ' preljev-y ” Svojstvo se koristi za kontrolu prelijevanja sadržaja duž poprečne osi unutar elementa. Određuje treba li isjeći sadržaj ili dodati traku za pomicanje kada sadržaj premašuje visinu spremnika. Moguće vrijednosti za ovo svojstvo su ' vidljivo ”, “ skriven ”, “ svitak ', i ' auto ”.

Posjetimo donje primjere za bolju demonstraciju svojstva overflow-y:

Primjer 1: Korištenje Visible kao vrijednosti za svojstvo Overflow-y

' vidljivo ” vrijednost dopušta sadržaju da se prelije iz spremnika i ne dodaje nikakav isječak ili trake za pomicanje. Posjetite donji praktični blok koda:

>

> Linuxhint >

> Svojstvo overflow-y postavljeno je na Visible >

= 'roditelj' stil = 'overflow-y: vidljivo;' >

= 'sadržaj djeteta' > Ovo je samo lutka sadržaj koristi se za demonstraciju svojstva overflow-y kada je postavljeno na vidljivo.

>

>

>

Opis gornjeg bloka koda:

Prvo dodijelite vrijednost ' roditelj ' prema ' razreda ' i upotrijebite ' stil ” atribut.
Osim toga, navedite vrijednost ' vidljivo ' u CSS ' preljev-y ” vlasništvo. I postavite je jednako ' stil ” kako bi CSS stil funkcionirao.
Zatim stvorite ugniježđeni ' div ' i dodijelite mu klasu ' dječji sadržaj ”. Također mu dostavite lažne podatke.

Sada upotrijebite CSS svojstva za poboljšanje vizualizacije koja pomaže u boljem razumijevanju CSS svojstva overflow-y:

.roditelj {

širina : 200 px ;

visina : 150 px ;

granica : 1px čvrsta crno ;

}

.childContent {

visina : 300 px ;

boja pozadine : svijetlo plava ;

}

Opis CSS svojstava je dat u nastavku:

Prvo, ' roditelj ' je odabrana klasa i vrijednosti ' 200 px ”, “ 150 px ', i ' 1px puna crna ' dodijeljeni su CSS-u ' širina ”, “ visina ', i ' granica ” svojstva, respektivno.
Zatim odaberite ' dječji sadržaj ' klase i postavite vrijednosti za ' 300 px ' i ' svijetlo plava ' u CSS ' visina ' i ' boja pozadine ” svojstva, respektivno. Ova klasa je proširena na ' roditelj ' klasa koju kontrolira CSS ' prelijevanje ” vlasništvo.

Nakon kompilacije isječaka koda, web stranica izgleda ovako:

Snimka prikazuje sadržaj preljeva koji je sada vidljiv, a traka za pomicanje ili isječak nisu dodani prema zadanim postavkama.

Primjer 2: Korištenje Hidden kao vrijednosti za svojstvo Overflow-y

' preljev-y ” svojstvo s vrijednošću “ skriven ” skriva sav sadržaj koji se kreće izvan nadređenog spremnika. Ovo svojstvo ne dodaje trake za pomicanje umjesto da je izrezalo prekoračeni sadržaj:

> preljev-y : skriveno >

= 'roditelj' stil = 'overflow-y: skriveno;' >

= 'sadržaj djeteta' > Ovo je samo lutka sadržaj koristi se za demonstraciju svojstva overflow-y kada je postavljeno na skriveno. Ovo je samo lutka sadržaj koristi se za demonstraciju svojstva overflow-y kada je postavljeno na skriveno.

>

>

Gornji isječak koda sadrži:

Prvo se ponovno umeće isti kod s povećanjem lažnog sadržaja smještenog unutar unutarnjeg div elementa.
Zatim promijenite vrijednost ' preljev-y ' svojstvo za ' skriven ' prema '
' oznaka koja ima klasu ' roditelj ”.

Nakon ponovnog renderiranja web stranica izgleda ovako:

Snimka prikazuje da je preljevni sadržaj izrezan.

Primjer 3: Korištenje pomicanja kao vrijednosti za svojstvo Overflow-y

Postavljanje vrijednosti ' preljev-y ' svojstvo za ' svitak ” omogućuje krajnjem korisniku da se pomiče kroz

sadržaj koji ga preplavljuje. Posjetimo donji blok koda:

> preljev-y : pomaknite se >

= 'roditelj' stil = 'overflow-y: pomicanje;' >

= 'sadržaj djeteta' > Ovo je samo lutka sadržaj koristi se za demonstraciju svojstva overflow-y kada je postavljeno na vidljivo. Ovo je samo lutka sadržaj koristi se za demonstraciju svojstva overflow-y kada je postavljeno na vidljivo.

>

>

U gornjem bloku koda:

Prvo, ista HTML struktura umetnuta je unutar ' ” oznaka.
Zatim promijenite vrijednost ' preljev-y ' svojstvo za ' svitak ”. Ovo omogućuje ' roditelj ” div za omogućavanje efekta pomicanja za kontrolu prekoračenog sadržaja.

Nakon kompilacije gornjeg bloka koda, web stranica izgleda ovako:

Gornji gid ilustrira da je učinak pomicanja bio dostupan za kontrolu prelijevog sadržaja.

Primjer 4: Korištenje Auto kao vrijednosti za svojstvo Overflow-y

U ovom primjeru korisnici mogu dodati traku za pomicanje samo ako sadržaj ne stane unutar spremnika. Također, ako se sadržaj ne prelijeva, traka za pomicanje neće biti dodana. To je moguće pružanjem vrijednosti ' auto ' u CSS ' preljev-y ” svojstvo:

> preljev-y : auto >

= 'roditelj' stil = 'overflow-y: auto;' >

U gornjem bloku koda:

Prvo umetnite istu HTML datoteku unutar ' ” oznaka.
Zatim ažurirajte vrijednost ' preljev-y ' svojstvo za ' auto ”. Omogućuje efekt pomicanja u odnosu na okomitu duljinu sadržaja.

Nakon završetka procesa kompilacije, web stranica radi ovako:

Gornji gif prikazuje svojstvo overflow-a koje je omogućilo traku za pomicanje prema duljini sadržaja.

Zaključak

CSS ' preljev-y ” svojstvo se koristi za kontrolu prelijevanja sadržaja duž poprečne osi unutar elementa. Svojstvo overflow-y kontrolira sadržaj prema specifičnoj vrijednosti danoj svojstvima overflow-y. ' vizualni ' vrijednost prikazuje prekoračeni sadržaj, ' skriven ' skriva sadržaj preljeva, a ' svitak ” vrijednost dodaje traku za pomicanje za kontrolu sadržaja. A ako je vrijednost ' auto ” traka za pomicanje dodaje ili uklanja prema duljini sadržaja.

Kako koristiti svojstvo Overflow-y u CSS-u?