Questo articolo illustra l'utilizzo della proprietà CSS overflow-y con numerosi esempi.
Come utilizzare la proprietà Overflow-y nei CSS?
Il CSS” overflow-y La proprietà ” viene utilizzata per controllare l'overflow del contenuto lungo l'asse trasversale all'interno di un elemento. Specifica se ritagliare il contenuto o aggiungere una barra di scorrimento quando il contenuto supera l'altezza del contenitore. I valori possibili per questa proprietà sono ' visibile ”, “ nascosto ”, “ scorrere ', E ' auto ”.
Esaminiamo gli esempi seguenti per una migliore dimostrazione della proprietà overflow-y:
Esempio 1: utilizzo di Visible come valore per la proprietà Overflow-y
IL ' visibile Il valore ' consente al contenuto di fuoriuscire dal contenitore e non aggiunge ritagli o barre di scorrimento. Visita il seguente pratico blocco di codice:
>
>
La descrizione del blocco di codice sopra:
- Innanzitutto, assegna un valore di ' genitore ' al ' classe ” attribuire e utilizzare il “ stile 'attributo.
- Inoltre, fornire il valore di ' visibile ” al CSS “ overflow-y ' proprietà. E impostalo uguale a ' stile ” per far funzionare lo stile CSS.
- Successivamente, crea un ' nidificato ' div ” e assegnagli una classe di “ childContent ”. Inoltre, forniscigli dati fittizi.
Ora, utilizza le proprietà CSS per migliorare la visualizzazione che aiuta a comprendere meglio la proprietà CSS overflow-y:
.genitore {larghezza : 200 pixel ;
altezza : 150 pixel ;
confine : 1 pixel solido nero ;
}
.childContent {
altezza : 300 pixel ;
colore di sfondo : azzurro ;
}
La descrizione delle proprietà CSS è riportata di seguito:
- Prima il ' genitore ” la classe è selezionata e i valori di “ 200 pixel ”, “ 150 pixel ', E ' 1px nero solido ” sono assegnati al CSS “ larghezza ”, “ altezza ', E ' confine ” proprietà, rispettivamente.
- Quindi, seleziona ' childContent ” class e imposta i valori di “ 300 pixel ' E ' azzurro ” al CSS “ altezza ' E ' colore di sfondo ” proprietà, rispettivamente. Questa classe è estesa al ' genitore 'classe controllata dal CSS' traboccare ' proprietà.
Dopo la compilazione dei frammenti di codice, la pagina web appare così:
L'istantanea mostra che il contenuto di overflow è ora visibile e la barra di scorrimento o il ritaglio non vengono aggiunti per impostazione predefinita.
Esempio 2: utilizzo di Hidden come valore per la proprietà Overflow-y
IL ' overflow-y ” proprietà con un valore di “ nascosto ” nasconde tutto il contenuto che si sposta al di fuori del suo contenitore principale. Questa proprietà non aggiunge barre di scorrimento ma ritaglia il contenuto in overflow:
>
>
Il frammento di codice sopra contiene:
- Innanzitutto, lo stesso codice viene nuovamente inserito con un aumento del contenuto fittizio posizionato all'interno dell'elemento div interno.
- Successivamente, modifica il valore di ' overflow-y ” proprietà a “ nascosto ' al ' ” tag con una classe di “ genitore ”.
Dopo il re-rendering, la pagina web ha questo aspetto:
L'istantanea mostra che il contenuto di overflow è stato ritagliato.
Esempio 3: utilizzo di Scroll come valore per la proprietà Overflow-y
Impostazione del valore di ' overflow-y ” proprietà al “ scorrere ” consente all'utente finale di scorrere i file
contenuto che lo trabocca. Visitiamo il seguente blocco di codice:
= 'genitore' stile = 'overflow-y: scorri;' >
= 'contenuto figlio' > Questo è solo un manichino contenuto utilizzato per la dimostrazione della proprietà overflow-y quando è impostata su visible. Questo è solo un manichino contenuto utilizzato per la dimostrazione della proprietà overflow-y quando è impostata su visible.
>
>Nel blocco di codice sopra:
- Innanzitutto, la stessa struttura HTML è stata inserita all'interno del “
etichetta '. - Successivamente, modifica il valore di ' overflow-y ” proprietà al “ scorrere ”. Ciò consente al “ genitore ” div per abilitare l'effetto di scorrimento per controllare il contenuto in overflow.
Dopo la compilazione del blocco di codice di cui sopra, la pagina web si presenta così:
Il gid precedente illustra che l'effetto di scorrimento era disponibile per controllare il contenuto in overflow.
Esempio 4: utilizzo di Auto come valore per la proprietà Overflow-y
In questo esempio, gli utenti possono aggiungere una barra di scorrimento solo se il contenuto non rientra nel contenitore. Inoltre, se il contenuto non trabocca, la barra di scorrimento non verrà aggiunta. È possibile fornendo il valore di ' auto ” al CSS “ overflow-y ' proprietà:
= 'genitore' stile = 'overflow-y: auto;' >
= 'contenuto figlio' > Questo è solo un manichino contenuto utilizzato per la dimostrazione della proprietà overflow-y quando è impostata su visible. Questo è solo un manichino contenuto utilizzato per la dimostrazione della proprietà overflow-y quando è impostata su visible.
>
>Nel blocco di codice sopra:
- Innanzitutto, inserisci lo stesso file HTML all'interno del '
etichetta '. - Successivamente, aggiorna il valore di ' overflow-y ” proprietà a “ auto ”. Abilita l'effetto di scorrimento relativo alla lunghezza verticale del contenuto.
Dopo la fine del processo di compilazione, la pagina web funziona così:
La gif sopra mostra la proprietà di overflow che ha abilitato la barra di scorrimento in base alla lunghezza del contenuto.
Conclusione
Il CSS” overflow-y La proprietà ” viene utilizzata per controllare il contenuto in overflow lungo l'asse trasversale all'interno di un elemento. La proprietà overflow-y controlla il contenuto in base al valore specifico fornito alle proprietà overflow-y. IL ' visivo ” visualizza il contenuto in overflow, il “ nascosto Il valore 'nasconde il contenuto di overflow e il valore' scorrere Il valore ” aggiunge una barra di scorrimento per controllare il contenuto. E se il valore è ' auto ” la barra di scorrimento aggiunge o rimuove in base alla lunghezza del contenuto.
- Innanzitutto, la stessa struttura HTML è stata inserita all'interno del “