Acest articol demonstrează utilizarea proprietății CSS overflow-y cu numeroase exemple.
Cum se utilizează proprietatea Overflow-y în CSS?
CSS „ preaplin-y Proprietatea ” este utilizată pentru a controla debordarea conținutului de-a lungul axei transversale în interiorul unui element. Specifică dacă să tăiați conținutul sau să adăugați o bară de defilare atunci când conținutul depășește înălțimea containerului. Valorile posibile pentru această proprietate sunt „ vizibil ”, “ ascuns ”, “ sul ', și ' auto ”.
Să vizităm exemplele de mai jos pentru o mai bună demonstrație a proprietății overflow-y:
Exemplul 1: Utilizarea Visible ca valoare pentru proprietatea Overflow-y
„ vizibil ” valoare permite conținutului să se reverse din container și nu adaugă nicio tăiere sau bare de defilare. Vizitați blocul de cod practic de mai jos:
>
>
>
Descrierea blocului de cod de mai sus:
- Mai întâi, atribuiți o valoare „ mamă „la „ clasă ” atribut și utilizați „ stil ” atribut.
- În plus, furnizați valoarea „ vizibil ” la CSS ” preaplin-y ” proprietate. Și setați-l egal cu „ stil ” pentru a face stilul CSS să funcționeze.
- Apoi, creați un „ imbricat div ” element și atribuiți-i o clasă de „ copilConținut ”. De asemenea, furnizați-i date fictive.
Acum, utilizați proprietățile CSS pentru a îmbunătăți vizualizarea, ceea ce ajută la o mai bună înțelegere a proprietății CSS overflow-y:
.mamă {lăţime : 200px ;
înălţime : 150px ;
frontieră : 1px solid negru ;
}
.childContent {
înălţime : 300px ;
culoare de fundal : albastru deschis ;
}
Descrierea proprietăților CSS este dată mai jos:
- În primul rând, „ mamă ” este selectată și valorile lui “ 200px ”, “ 150px ', și ' 1px negru solid „ sunt atribuite CSS „ lăţime ”, “ înălţime ', și ' frontieră ” proprietăți, respectiv.
- Apoi, selectați „ copilConținut ” și setați valorile lui ” 300px ' și ' albastru deschis ” la CSS ” înălţime ' și ' culoare de fundal ” proprietăți, respectiv. Această clasă este extinsă la „ mamă „clasa care este controlată de CSS” revărsare ” proprietate.
După compilarea fragmentelor de cod, pagina web apare astfel:
Instantaneul arată că conținutul overflow a fost acum vizibil și bara de defilare sau decuparea nu sunt adăugate în mod implicit.
Exemplul 2: Utilizarea Hidden ca valoare pentru proprietatea Overflow-y
„ preaplin-y ” proprietate cu o valoare de ” ascuns ” ascunde tot conținutul care se mută în afara containerului său părinte. Această proprietate nu adaugă bare de defilare, ci a tăiat conținutul depășit:
>
>
Fragmentul de cod de mai sus conține:
- Mai întâi, același cod este inserat din nou cu o creștere a conținutului inactiv plasat în interiorul elementului div interior.
- Apoi, modificați valoarea „ preaplin-y „proprietate la „ ascuns „la „ „etichetă având o clasă de „ mamă ”.
După re-rendarea paginii web arată astfel:
Instantaneul afișează că conținutul overflow a fost tăiat.
Exemplul 3: Utilizarea Scroll ca valoare pentru proprietatea Overflow-y
Setarea valorii „ preaplin-y ” proprietate la “ sul ” permite utilizatorului final să deruleze prin
continut care o debordeaza. Să vizităm blocul de cod de mai jos:
= 'mamă' stil = „overflow-y: scroll;” >
= „childContent” > Acesta este doar fals conţinut utilizat pentru demonstrarea proprietății overflow-y atunci când este setată la vizibil. Acesta este doar fals conţinut utilizat pentru demonstrarea proprietății overflow-y atunci când este setată la vizibil.
>
>În blocul de cod de mai sus:
- Mai întâi, aceeași structură HTML a fost inserată în interiorul „
' etichetă. - Apoi, modificați valoarea „ preaplin-y ” proprietate la “ sul ”. Acest lucru permite „ mamă ” div pentru a activa efectul de defilare pentru a controla conținutul depășit.
După compilarea blocului de cod de mai sus, pagina web apare astfel:
Ghidul de mai sus ilustrează faptul că efectul de defilare a fost disponibil pentru controlul conținutului depășit.
Exemplul 4: Utilizarea Auto ca valoare pentru proprietatea Overflow-y
În acest exemplu, utilizatorii pot adăuga o bară de derulare numai dacă conținutul nu se încadrează în container. De asemenea, dacă conținutul nu depășește, bara de derulare nu va fi adăugată. Este posibil prin furnizarea valorii „ auto ” la CSS ” preaplin-y ” proprietate:
= 'mamă' stil = 'overflow-y: auto;' >
= „childContent” > Acesta este doar fals conţinut utilizat pentru demonstrarea proprietății overflow-y atunci când este setată la vizibil. Acesta este doar fals conţinut utilizat pentru demonstrarea proprietății overflow-y atunci când este setată la vizibil.
>
>În blocul de cod de mai sus:
- Mai întâi, inserați același fișier HTML în interiorul „
' etichetă. - Apoi, actualizați valoarea „ preaplin-y „proprietate la „ auto ”. Activează efectul de defilare în raport cu lungimea verticală a conținutului.
După încheierea procesului de compilare, pagina web funcționează astfel:
Gif-ul de mai sus afișează proprietatea de overflow care a activat bara de defilare în funcție de lungimea conținutului.
Concluzie
CSS „ preaplin-y Proprietatea ” este utilizată pentru a controla conținutul depășit de-a lungul axei transversale din cadrul unui element. Proprietatea overflow-y controlează conținutul în funcție de valoarea specifică furnizată proprietăților overflow-y. „ vizual ” afișează conținutul depășit, valoarea ” ascuns ” ascunde conținutul de depășire, iar ” sul ” value adaugă o bară de defilare pentru a controla conținutul. Și dacă valoarea este „ auto ” bara de derulare adaugă sau elimină în funcție de lungimea conținutului.
- Mai întâi, aceeași structură HTML a fost inserată în interiorul „