Rendere un div scorrevole verticalmente è facile utilizzando la proprietà overflow CSS. Ci sono valori diversi in proprietà di trabocco . Possiamo usare quella proprietà per ottenere una barra di scorrimento su una pagina web. Gli esempi riportati di seguito illustrano le modalità per impostare una barra di scorrimento verticale su una pagina Web.

Esempio 1: In questo esempio, abbiamo impostato overflow-x: hidden; e overflow-y: auto; che nasconderà automaticamente la barra di scorrimento orizzontale e presenterà solo la barra di scorrimento verticale.

html

> <> html> >> <> head> >> > <> style> >> > h1 {> > color: Green;> > }> > div.scroll {> > margin: 4px, 4px;> > padding: 4px;> > background-color: green;> > width: 500px;> > height: 110px;> > overflow-x: hidden;> > overflow-y: auto;> > text-align: justify;> > }> > style>testa>

`techcodeview.comh1>`
È una buona piattaforma per imparare a programmare. È un sito web educativo. Preparati per la campagna di reclutamento di aziende basate su prodotti come Microsoft, Amazon, Adobe ecc. con un corso di preparazione al posizionamento online gratuito. Il corso si concentra su vari MCQ e domande di codifica che potrebbero essere poste durante le interviste e renderà la tua prossima stagione di collocamento efficiente e di successo. Inoltre, qualsiasi geek può aiutare altri geek scrivendo articoli su techcodeview.com, la pubblicazione di articoli segue alcuni passaggi in cui gli articoli che necessitano di poche modifiche/miglioramenti da parte dei revisori vengono pubblicati per primi. Per rivedere rapidamente i tuoi articoli, fai riferimento agli articoli esistenti, al loro stile di formattazione, allo stile di codifica e cerca di avvicinarti a loro. Se sei un principiante, puoi fare riferimento alle Linee guida per scrivere un articolo div> center> body> html>>

Produzione:

Produzione

Esempio 2: In questo esempio usa auto al posto di overflow-x:hidden; e overflow-y:auto; per rendere div scorrevole verticalmente.

html

> <> html> >> <> head> >> > <> style> >> > h1 {> > color: Green;> > }> > div.gfg {> > margin: 5px;> > padding: 5px;> > background-color: green;> > width: 500px;> > height: 110px;> > overflow: auto;> > text-align: justify;> > }> > style>testa>