Rendere scorrevole un div verticalmente usando i CSS

Questo

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

offre divall'utente la possibilità di scorrere sia in orizzontale che in verticale. Come posso cambiarlo in modo che il div sia scorrevole solo verticalmente?

Hai coperto a parte l'utilizzo della proprietà sbagliata. La barra di scorrimento può essere attivato con qualsiasi proprietà overflow, overflow-xo overflow-ye ciascuno può essere impostata su qualsiasi visible, hidden, scroll, auto, o inherit. Attualmente stai guardando questi due:

• auto- Questo valore esaminerà la larghezza e l'altezza della scatola. Se sono definiti, non consentirà alla casella di espandersi oltre tali limiti. Invece (se il contenuto supera tali limiti), verrà creata una barra di scorrimento per entrambi i limiti (o entrambi) che supera la sua lunghezza.

• scroll- Questo valore forza una barra di scorrimento, qualunque cosa accada, anche se il contenuto non supera il limite impostato. Se non è necessario scorrere il contenuto, la barra apparirà come "disabilitata" o non interattiva.

Se vuoi sempre che appaia la barra di scorrimento verticale:

Si dovrebbe usare overflow-y: scroll. Ciò forza la visualizzazione di una barra di scorrimento per l'asse verticale indipendentemente dal fatto che sia necessaria. Se non è possibile scorrere il contesto, verrà visualizzato come una barra di scorrimento "disabilitata".

Se desideri visualizzare solo una barra di scorrimento, puoi scorrere la casella:

Basta usare overflow: auto. Dal momento che il tuo contenuto per impostazione predefinita si interrompe alla riga successiva quando non può adattarsi alla riga corrente, non verrà creata una barra di scorrimento orizzontale (a meno che non si trovi su un elemento che ha il ritorno a capo disattivato). 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.

Prova così.

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

Per un'altezza del viewport del 100% utilizzare:

overflow: auto;
max-height: 100vh;

Utilizzare overflow-y: auto;sul div.

Inoltre, dovresti impostare anche la larghezza.

È possibile utilizzare questo codice invece.

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

overflow-x : la proprietà overflow-x specifica cosa fare con i bordi sinistro / destro del contenuto - se trabocca l'area del contenuto dell'elemento.
overflow-y : la proprietà overflow-y specifica cosa fare con i bordi superiore / inferiore del contenuto - se trabocca l'area del contenuto dell'elemento.

Valori
visibili : valore predefinito. Il contenuto non viene ritagliato e potrebbe essere reso al di fuori della casella del contenuto.
nascosto : il contenuto è troncato e non viene fornito alcun meccanismo di scorrimento.
scroll : il contenuto viene troncato e viene fornito un meccanismo di scorrimento.
auto : dovrebbe causare un meccanismo di scorrimento per le caselle di overflow.
iniziale : imposta questa proprietà sul valore predefinito.
eredita Eredita questa proprietà dal suo elemento genitore.

È possibile utilizzare overflow-y: scrollper 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>

Il problema con tutte queste risposte per me era che non rispondevano. Ho dovuto avere un'altezza fissa per un div genitore che non volevo. Inoltre, non volevo passare un sacco di tempo a pensare alle domande dei media. Se stai usando angolare, puoi usare il tabset bootstrap e farà tutto il duro lavoro per te. Sarai in grado di scorrere il contenuto interno e sarà reattivo. Quando configuri la scheda, fallo in questo modo: $scope.tab = { title: '', url: '', theclass: '', ative: true };... il punto è che non vuoi un titolo o l'icona di un'immagine. quindi nascondi 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 su cui è ancora possibile fare clic se non si implementa questo:.nav > li > a {padding:0px;margin:0px;}