Differenza tra HTML "overflow: auto" e "overflow: scroll"


123

Quando stavo studiando i overflowvalori della proprietà, mi sono imbattuto in questi due valori: autoe scroll, che aggiunge le barre di scorrimento se il contenuto supera l'elemento.

Qualcuno potrebbe spiegarmi qual è la differenza tra loro?

Risposte:


185

Auto mostrerà solo una barra di scorrimento quando qualsiasi contenuto viene ritagliato.

Lo scorrimento mostrerà comunque sempre la barra di scorrimento anche se tutto il contenuto si adatta e non puoi scorrerlo.


2
Non sembra esserci alcuna differenza, almeno sull'ultima versione di Safari: anche con scroll, non vedo la barra di scorrimento se il contenuto si adatta. Ma, per sicurezza, sono andato con autoperché voglio solo mostrare una barra di scorrimento quando il contenuto è tagliato.
ma11hew28

1
@ MattDiPasquale OS X e Windows visualizzano le barre di scorrimento in modi diversi. Probabilmente stai usando Safari su Mac, giusto? OS X spesso nasconde la barra di scorrimento finché non effettui lo scorrimento.
Johan Davidsson

1
Sembra esserci più differenza di così, overlow: scrollrende la scatola più sottile: jsbin.com/letog/2/edit
Dmitri Zaitsev

In Safari 12 (probabilmente anche nelle versioni precedenti), a meno che le barre di scorrimento non siano configurate per mostrare sempre overflow: scrolle overflow: autosiano funzionalmente identiche quando il contenitore è abbastanza grande da contenere il contenuto.
Luke Worth

15

overflow: scrollnasconderà tutto il contenuto in eccesso e farà apparire le barre di scorrimento sull'elemento in questione. Se il contenuto non è in overflow, le barre di scorrimento saranno comunque visibili, ma disabilitate.

overflow: auto è molto simile, ma le barre di scorrimento vengono visualizzate solo quando il contenuto è in eccesso.

C'è una spiegazione simile di questo qui , con alcuni screenshot per illustrare il punto.


2

Dai un'occhiata ai trucchi CSS .

Auto mostrerà la barra di scorrimento se e solo se il contenuto trabocca; ma lo scorrimento mostrerà sempre la barra di scorrimento, indipendentemente dal fatto che il contenuto sia traboccante o meno.


1

L'aggiunta di un punto alla risposta, Overflow:autonon ha funzionato in IE7 quando la posizione del contenitore è assoluta Posizione relativa overflow IE7 . Ma l'impostazione Overflow:scrollfunziona


0

overflow: scroll mostrerà sia la barra di scorrimento orizzontale che quella verticale anche quando non hai bisogno dell'una o dell'altra. mentre, overflow: auto mostrerà la barra di scorrimento di cui ha bisogno il tuo div. quindi fondamentalmente auto ti aiuterà a sbarazzarti di entrambe le scollbar. Ecco di più:

https://css-tricks.com/the-css-overflow-property/

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.