Att göra en div vertikalt rullbar är lätt genom att använda egenskapen CSS overflow. Det finns olika värden i översvämningsfastighet . Vi kan använda den egenskapen för att få en rullningslist på en webbsida. De nedan nämnda exemplen är sätten att ställa in en vertikal rullningslist på en webbsida.

Exempel 1: I det här exemplet har vi ställt in overflow-x: hidden; och overflow-y: auto; som automatiskt döljer den horisontella rullningslisten och visar endast den vertikala rullningslisten.

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

`techcodeview.comh1>`
Det är en bra plattform för att lära sig programmering. Det är en pedagogisk webbplats. Förbered dig för rekryteringen av produktbaserade företag som Microsoft, Amazon, Adobe etc med en gratis onlinekurs för förberedelse av placeringar. Kursen fokuserar på olika MCQ:s och kodningsfrågor som sannolikt kommer att ställas i intervjuerna och göra din kommande placeringssäsong effektiv och framgångsrik. Alla nördar kan också hjälpa andra nördar genom att skriva artiklar på techcodeview.com, publicering av artiklar följer några steg som är Artiklar som behöver lite modifiering/förbättring från granskare publiceras först. För att snabbt få dina artiklar granskade, hänvisa till befintliga artiklar, deras formateringsstil, kodningsstil, och försök att få dig att vara nära dem. Om du är nybörjare kan du hänvisa till Riktlinjer för att skriva en artikel div> center> body> html>>

Produktion:

Produktion

Exempel 2: I det här exemplet använd auto istället för overflow-x:hidden; och overflow-y:auto; för att göra div vertikalt rullbar.

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