Fare un div verticalmente scorrevole usando i CSS

Question

Questo

<div id="" style="overflow:scroll; height:400px;">

dà un div che l'utente può scorrere sia in orizzontale che in verticale. Come posso cambiarlo in modo che il div sia solo scorrevole in verticale?

Answer 1

Hai coperto oltre all'utilizzo della proprietà errata. La barra di scorrimento può essere attivato con qualsiasi proprietà overflow, overflow-x, o overflow-y e ciascuno può essere impostata su qualsiasi visible, hidden, scroll, auto o inherit. Stai guardando questi due:

• auto - Questo valore sarà guardare la larghezza e l'altezza della scatola. Se sono definiti, non lasceranno che la scatola si espanda oltre quei limiti. Invece (se il contenuto supera questi limiti), creerà una barra di scorrimento per entrambi i limiti (o entrambi) che superano la sua lunghezza.

• scroll - questi valori forze una barra di scorrimento, non importa quale, anche se il contenuto non supera il set di confine. Se non è necessario scorrere il contenuto, la barra apparirà come "disabilitata" o non interattiva.

Se sempre desidera che la barra di scorrimento verticale appaia:

Si dovrebbe usare overflow-y: scroll. Questo forza una barra di scorrimento da visualizzare per l'asse verticale indipendentemente dal fatto che sia necessaria. Se non puoi effettivamente scorrere il contesto, apparirà come una barra di scorrimento "disabilitata".

Se si desidera una barra di scorrimento a comparire se è possibile scorrere la casella solo:

Basta usare overflow: auto. Dal momento che il contenuto di default si interrompe solo sulla riga successiva quando non può adattarsi alla linea corrente, non verrà creata una barra di scorrimento orizzontale (a meno che non si trovi su un elemento che ha disabilitato il word-wrapping). Per la barra verticale, consentirà al contenuto di espandersi fino all'altezza specificata. Se supera tale altezza, mostrerà una barra di scorrimento verticale per visualizzare il resto del contenuto, ma non mostrerà una barra di scorrimento se non supera l'altezza.

Answer 2

Provare così.

<div style="overflow-y: scroll; height:400px;">

Answer 3

Usa overflow-y: auto; sul div.

Inoltre, si dovrebbe impostare anche la larghezza.

Answer 4

È possibile utilizzare questo codice.

<div id="" style="overflow-y:scroll; overflow-x:hidden; height:400px;"> 

di overflow-x: La proprietà overflow-x indica cosa fare con i bordi sinistro/destro del contenuto - se trabocca zona contenuto dell'elemento.
overflow-y: la proprietà overflow-y specifica cosa fare con i bordi superiore/inferiore del contenuto, se esso trabocca dall'area del contenuto dell'elemento.

Valori
visibile: valore predefinito. Il contenuto non è ritagliato e può essere visualizzato all'esterno della casella del contenuto.
nascosto: il contenuto è troncato e non viene fornito alcun meccanismo di scorrimento.
scroll: il contenuto viene ritagliato e viene fornito un meccanismo di scorrimento.
auto: dovrebbe causare un meccanismo di scorrimento per le caselle traboccanti.
iniziale: imposta questa proprietà sul valore predefinito.
inherit Eredita questa proprietà dall'elemento padre.

Answer 5

Il problema con tutte queste risposte per me era che non rispondevano. Dovevo avere un'altezza fissa per un genitore div che non volevo. Inoltre, non volevo passare un sacco di tempo a cianciare con le domande dei media. Se si utilizza angolare, è possibile utilizzare il separatore bootstrap e farà tutto il lavoro duro per voi. Sarai in grado di scorrere il contenuto interno e sarà reattivo. Quando si imposta la scheda, farlo in questo modo: $scope.tab = { title: '', url: '', theclass: '', ative: true }; ... il punto è che non si desidera un'icona di titolo o immagine. poi nascondere il contorno della scheda in cs in questo modo: .nav-tabs { border-bottom:none; } e anche questo .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {border:none;} e, infine, per rimuovere la scheda invisibile che si può ancora cliccare su se non si sceglie di implementare questa: .nav > li > a {padding:0px;margin:0px;}

Answer 6

per il 100% l'uso di altezza finestra :

overflow: auto; 
max-height: 100vh; 

Answer 7

È possibile utilizzare overflow-y: scroll per lo scorrimento verticale.

<div style="overflow-y:scroll; height:400px; background:gray"> 
 
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
 
    
 
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
 
    
 
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
 
    
 
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
 
    
 
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
 
    
 
</div>