Een div verticaal scrollbaar maken is eenvoudig met behulp van de CSS-overflow-eigenschap. Er zijn verschillende waarden in de overloop eigendom . We kunnen die eigenschap gebruiken om een schuifbalk op een webpagina te krijgen. De onderstaande voorbeelden zijn manieren om een verticale schuifbalk op een webpagina in te stellen.

Voorbeeld 1: In dit voorbeeld hebben we de overflow-x: verborgen; en overloop-y: auto; waardoor de horizontale schuifbalk automatisch wordt verborgen en alleen de verticale schuifbalk wordt weergegeven.

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>hoofd>

`techcodeview.comh1>`
Het is een goed platform om programmeren te leren. Het is een educatieve website. Bereid je voor op de rekruteringscampagne van productgebaseerde bedrijven zoals Microsoft, Amazon, Adobe enz. met een gratis online voorbereidingscursus voor plaatsingen. De cursus richt zich op verschillende MCQ's en codeervragen die waarschijnlijk in de interviews worden gesteld en maakt uw komende plaatsingsseizoen efficiënt en succesvol. Ook kunnen alle nerds andere nerds helpen door artikelen te schrijven op techcodeview.com. Het publiceren van artikelen volgt een paar stappen. Artikelen die weinig aanpassing/verbetering van reviewers nodig hebben, worden eerst gepubliceerd. Om uw artikelen snel te laten beoordelen, verwijzen wij u naar bestaande artikelen, hun opmaakstijl en coderingsstijl, en proberen u er dichtbij te laten komen. Als u een beginner bent, kunt u de Richtlijnen raadplegen om een artikel te schrijven div> center> body> html>>

Uitgang:

Uitvoer

Voorbeeld 2: In dit voorbeeld gebruik je auto in plaats van overflow-x:hidden; en overloop-y:auto; om de div verticaal scrollbaar te maken.

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>hoofd>