Rulling spiller uten tvil en viktig rolle i webapplikasjoner. Du trenger imidlertid kanskje ikke den rullefeltet på siden din på et tidspunkt. For eksempel, hvis containeren bare dekker tjuefem prosent av en webside og den er på linje, vil den ekstra rullefeltet sikkert komme i sentrum. I en slik situasjon kan du bruke noen få CSS -egenskaper for å deaktivere rullefeltet.

Denne artikkelen vil dekke metoden for å deaktivere rullefeltet i CSS.

Hvordan deaktivere rullefelt i CSS?

For å deaktivere rullefeltet på en side, bruk følgende CSS -egenskaper:

• Overflow-y (Deaktiver vertikal rullefelt)
• Overflow-X (Deaktiver horisontal rullefelt)
• flyte (Deaktiver vertikale og horisontale rullefelt)

La oss utforske hver CSS -eiendom en etter en.

Metode 1: Bruk overløpsegenskap for å deaktivere vertikal rullefelt i CSS

“Overflow-y”Eiendom spesifiserer hva som vil skje hvis innholdet ikke passer beholderen på en høydemessig måte. Det brukes også til å vise overløpsinnholdet i et blokknivåelement og til å legge til eller deaktivere en rullefelt.

Så la oss ta et eksempel for å sjekke prosedyren for å deaktivere den vertikale rullefeltet ved hjelp av overløps-CSS-egenskapen.

Eksempel

For vår HTML -side vil vi deaktivere den vertikale rullefeltet som er til stede på høyre side:

Plasser de ønskede HTML -elementene, som i vårt tilfelle, vil vi legge til en overskrift i "”Tag av HTML -filen:

Deaktivere rullefeltet

For å skjule den vertikale rullefeltet, sett "Overflow-y”Eiendom til“skjult”. Høyden og bredden på “200%”Vil bli brukt til å gjøre siden lengre og bredere. Slik vil vi med vilje få rullefeltene på siden vår:

Lagre den oppgitte koden og kjør HTML -filen din i nettleseren:

Som du ser, har vi deaktivert den vertikale rullefeltet ved hjelp av overløp-y CSS-egenskapen.

Metode 2: Bruk Overflow-X-egenskap for å deaktivere horisontal rullefelt i CSS

Når innholdet ikke passer inn i beholderen på en breddemessig måte, "Overflow-X”Eiendom brukes til å administrere slike scenarier. Det angir det som viser når det ekstra innholdet flyter over et lystekant og venstre kanter på blokknivå. Denne CSS -egenskapen kan også brukes til å deaktivere den horisontale rullefeltet.

Eksempel

Vi vil nå deaktivere den nedenfor-fremhevede horisontale rullefeltet på HTML-siden vår:

For å skjule den horisontale rullefeltet, sett "Overflow-X til "skjult”Og legg til verdien av høyden og breddeegenskapene som angitt i forrige eksempel:

Produksjon

Ønsker å deaktivere både horisontale og vertikale stenger samtidig? Hvis ja, følg neste avsnitt!

Metode 3: Bruk overløpsegenskap for å deaktivere vertikale og horisontale rullefelt i CSS

Når innholdet ikke passer inn i beholderen horisontalt så vel som vertikalt, "flyte”Eiendom spesifiserer om du vil legge til rullefelt eller klippe innholdet. Du kan også bruke denne CSS -egenskapen til å deaktivere vertikale og horisontale rullefeltene samtidig.

Eksempel

I den samme HTML -filen vil vi legge til “flyte”Eiendom og tilordne den en“skjult”Verdi. Dette vil deaktivere rullefeltet for begge steder, horisontalt og vertikalt:

Produksjon

Vi har tilbudt instruksjoner om deaktiverende rullefelt ved hjelp av forskjellige CSS -egenskaper.

Konklusjon

For å deaktivere rullefelt i CSS, kan du bruke “Overflow-X”,“Overflow-y", og "flyte" egenskaper. Overflow-X-egenskapen brukes spesielt for å deaktivere den vertikale rullefeltet, og overløpsegenskapen for å deaktivere horisontale rullefelt. Videre hjelper overløpsegenskaper med å deaktivere vertikale og horisontale barer samtidig. Denne artikkelen diskuterte metodene for å deaktivere rullefelt i CSS.