Gjøre en div vertikalt rullbar ved hjelp av CSS
Det er enkelt å gjøre en div vertikalt rullbar ved å bruke CSS-overflyt-egenskapen. Det er forskjellige verdier i overløp eiendom . Vi kan bruke den egenskapen til å få et rullefelt på en nettside. De nevnte eksemplene er måtene å sette et vertikalt rullefelt på en nettside.
Eksempel 1: I dette eksemplet har vi satt overflow-x: skjult; og overløp-y: auto; som automatisk skjuler den horisontale rullelinjen og viser bare den vertikale rullelinjen.
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>hodet> |
Produksjon:
Produksjon
Eksempel 2: I dette eksemplet bruker du auto i stedet for overflow-x:hidden; og overløp-y:auto; for å gjøre 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>hodet> |
Produksjon:
Produksjon