Aquest article demostra l'ús de la propietat CSS overflow-y amb nombrosos exemples.
Com utilitzar la propietat Overflow-y a CSS?
El CSS ' desbordament-y La propietat s'utilitza per controlar el desbordament del contingut al llarg de l'eix transversal dins d'un element. Especifica si es retalla el contingut o si s'afegeix una barra de desplaçament quan el contingut supera l'alçada del contenidor. Els valors possibles per a aquesta propietat són ' visible ”, “ amagat ”, “ desplaçar-se ”, i “ automàtic ”.
Visitem els exemples següents per obtenir una millor demostració de la propietat overflow-y:
Exemple 1: ús de Visible com a valor per a la propietat Overflow-y
El ' visible ” permet que el contingut es desbordi del contenidor i no afegeix cap retall ni barres de desplaçament. Visiteu el següent bloc de codi pràctic:
>
>
La descripció del bloc de codi anterior:
- Primer, assigneu un valor de ' pare ' fins al ' classe ” atribueix i utilitza el “ estil ” atribut.
- A més, proporcioneu el valor de ' visible ' al CSS ' desbordament-y ' propietat. I posa-ho igual al ' estil ” per fer que l'estil CSS funcioni.
- A continuació, creeu un ' imbricat ' div ” i assigneu-li una classe de “ Contingut infantil ”. A més, proporcioneu-li dades simulades.
Ara, utilitzeu les propietats CSS per millorar la visualització que ajuda a entendre millor la propietat CSS overflow-y:
.pares {amplada : 200 píxels ;
alçada : 150 píxels ;
frontera : 1px sòlid negre ;
}
.childContent {
alçada : 300 píxels ;
color de fons : blau clar ;
}
La descripció de les propietats CSS es dóna a continuació:
- En primer lloc, el ' pare ' es selecciona la classe i els valors de ' 200 píxels ”, “ 150 píxels ”, i “ 1px negre sòlid ' s'assignen al CSS ' amplada ”, “ alçada ”, i “ frontera ” propietats, respectivament.
- A continuació, seleccioneu ' Contingut infantil ” classe i establiu els valors de “ 300 píxels ' i ' blau clar ' al CSS ' alçada ' i ' color de fons ” propietats, respectivament. Aquesta classe s'amplia als ' pare 'classe controlada pel CSS' desbordament ' propietat.
Després de la compilació de fragments de codi, la pàgina web apareix així:
La instantània mostra que ara el contingut desbordat ha estat visible i que la barra de desplaçament o el retall no s'afegeixen per defecte.
Exemple 2: ús d'Hidden com a valor per a la propietat Overflow-y
El ' desbordament-y ' propietat amb un valor de ' amagat ” amaga tot el contingut que es mou fora del seu contenidor principal. Aquesta propietat no afegeix barres de desplaçament, sinó que retalla el contingut desbordat:
>
>
El fragment de codi anterior conté:
- En primer lloc, s'insereix de nou el mateix codi amb un augment del contingut fictici col·locat dins de l'element div intern.
- A continuació, canvieu el valor de ' desbordament-y 'propietat a' amagat ' fins al ' etiqueta amb una classe de pare ”.
Després de tornar a renderitzar la pàgina web té aquest aspecte:
La instantània mostra que el contingut desbordat s'ha retallat.
Exemple 3: ús de Scroll com a valor per a la propietat Overflow-y
Establir el valor de ' desbordament-y 'propietat a la' desplaçar-se ” permet a l'usuari final desplaçar-se pel
contingut que el desborda. Visitem el següent bloc de codi:
= 'pares' estil = 'desbordament-y: desplaçament;' >
= 'contingut infantil' > Això només és un simulacre contingut s'utilitza per a la demostració de la propietat desbordament-y quan està configurada com a visible. Això només és un simulacre contingut s'utilitza per a la demostració de la propietat desbordament-y quan està configurada com a visible.
>
>Al bloc de codi anterior:
- Primer, s'ha inserit la mateixa estructura HTML dins del '
' etiqueta. - A continuació, canvieu el valor de ' desbordament-y 'propietat a la' desplaçar-se ”. Això permet que ' pare ” div per habilitar l'efecte de desplaçament per controlar el contingut desbordat.
Després de la compilació del bloc de codi anterior, la pàgina web apareix així:
El gid anterior il·lustra que l'efecte de desplaçament ha estat disponible per controlar el contingut desbordat.
Exemple 4: Ús de Auto com a valor per a la propietat Overflow-y
En aquest exemple, els usuaris només poden afegir una barra de desplaçament si el contingut no encaixa dins del contenidor. A més, si el contingut no es desborda, la barra de desplaçament no s'afegirà. És possible aportant el valor de ' automàtic ' al CSS ' desbordament-y ' propietat:
= 'pares' estil = 'overflow-y: auto;' >
= 'contingut infantil' > Això només és un simulacre contingut s'utilitza per a la demostració de la propietat desbordament-y quan està configurada com a visible. Això només és un simulacre contingut s'utilitza per a la demostració de la propietat desbordament-y quan està configurada com a visible.
>
>Al bloc de codi anterior:
- Primer, inseriu el mateix fitxer HTML dins del '
' etiqueta. - A continuació, actualitzeu el valor de ' desbordament-y 'propietat a' automàtic ”. Habilita l'efecte de desplaçament en relació a la longitud vertical del contingut.
Un cop finalitzat el procés de compilació, la pàgina web funciona així:
El gif anterior mostra la propietat de desbordament que ha habilitat la barra de desplaçament segons la longitud del contingut.
Conclusió
El CSS ' desbordament-y La propietat s'utilitza per controlar el contingut desbordat al llarg de l'eix transversal dins d'un element. La propietat overflow-y controla el contingut segons el valor específic proporcionat a les propietats overflow-y. El ' visual ' El valor mostra el contingut desbordat, el ' amagat ' El valor oculta el contingut de desbordament i el ' desplaçar-se ” El valor afegeix una barra de desplaçament per controlar el contingut. I si el valor és ' automàtic ” la barra de desplaçament afegeix o elimina segons la durada del contingut.
- Primer, s'ha inserit la mateixa estructura HTML dins del '