Gjøre en div vertikalt rullbar ved hjelp av CSS

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>

techcodeview.comh1>
Det er en god plattform for å lære programmering. Det er en pedagogisk nettside. Forbered deg på rekrutteringskjøringen til produktbaserte selskaper som Microsoft, Amazon, Adobe etc med et gratis online plasseringsforberedende kurs. Kurset fokuserer på ulike MCQ-er og kodingsspørsmål som sannsynligvis vil bli stilt i intervjuene og gjør din kommende plasseringssesong effektiv og vellykket. Alle nerder kan også hjelpe andre nerder ved å skrive artikler på techcodeview.com, publisering av artikler følger noen få trinn som er Artikler som trenger liten modifikasjon/forbedring fra anmeldere publiseres først. For raskt å få gjennomgått artiklene dine, vennligst referer til eksisterende artikler, deres formateringsstil, kodestil, og prøv å få deg til å være nær dem. Hvis du er nybegynner, kan du se retningslinjer for å skrive en artikkel div> center> body> html>>

Produksjon:

ezgifcom-video-to-gif-(12)

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>

techcodeview.comh1>
Det er en god plattform for å lære programmering. Det er et pedagogisk nettsted. Forbered deg på rekrutteringskampanjen til produktbaserte selskaper som Microsoft, Amazon, Adobe osv. med et gratis online plasseringsforberedende kurs. Kurset fokuserer på ulike MCQ-er og kodingsspørsmål som sannsynligvis vil bli stilt i intervjuene og gjør din kommende plasseringssesong effektiv og vellykket. Alle nerder kan også hjelpe andre nerder ved å skrive artikler på techcodeview.com, publisering av artikler følger noen få trinn som er Artikler som trenger liten modifikasjon/forbedring fra anmeldere publiseres først. For raskt å få gjennomgått artiklene dine, vennligst referer til eksisterende artikler, deres formateringsstil, kodestil, og prøv å få deg til å være nær dem. Hvis du er nybegynner, kan du se retningslinjer for å skrive en artikkel div> center> body> html>>

Produksjon:

ezgifcom-video-to-gif-(13)

Produksjon