Hvordan skjule rullefeltet i CSS

I nettlesing vises rullefeltet vertikalt og horisontalt, slik at brukerne kan bla opp og venstre-høyre-høyre. Ved hjelp av CSS kan vi angi attributtene til rullefeltet i henhold til vårt valg. For eksempel å skjule og endre fargen og bredden. I denne artikkelen vil vi lære å skjule rullefeltet ved hjelp av CSS -egenskaper.

Blant de mange måtene å skjule det på, er det vanligste overløpet.

Her er noen praktiske eksempler der vi vil skjule rullefeltet ved hjelp av disse egenskapene.

OK, la oss komme i gang!

Skjul rullefelt ved hjelp av overløpseiendommer i CSS

“flyte”Eiendom bestemmer hvordan innholdet vil se ut når det for eksempel flommer over fra innholdsboksen, ved å klippe, vise rullefelt eller vises utenfor boksen.

Syntaks

I CSS har overløpsegenskapen følgende syntaks:

Overløp: verdi

I verdien av verdien kan vi angi forskjellige verdier/parametere for overløpsegenskaper som synlige, skjulte, rulle, auto og arve. Tilordne “skjult”Verdi til overløpseiendommen for å skjule rullefeltet.

Her er et praktisk eksempel som illustrerer dette konseptet på en bedre måte.

Eksempel: Hvordan skjule rullefeltet i CSS ved hjelp av overløpseiendommer?

La oss lage et avsnitt i å bruke

Tag som følger:

Vi blar opp og venstre til høyre på nettsiden mens vi surfer på nettet ved å bruke rullefeltet som vises vertikalt og horisontalt. I HTML vises det som standard. Ved hjelp av CSS kan vi angi attributter til rullefeltet i henhold til vårt valg jeg.e bredde på rullefeltet og fargen også. Vi skjuler også rullefeltet ved hjelp av CSS.
Blant de mange måtene å skjule det, er de vanligste overløpet, rullebredden og webkit-rollelegenskapene.

Utfallet av den gitte koden vil være:

Her kan vi se at rullefeltet vises vertikalt. La oss bruke CSS -overløpsegenskapen for å skjule den.

I CSS, skriv følgende kode og sett overløpsegenskapen til “skjult”:

kropp
overløp: skjult;

Som et resultat vil rullefeltet forsvinne fra siden:

Vi kan se at rullefeltet er fjernet, men funksjonaliteten til rullefeltet er også deaktivert. Ved å bruke CSS kan vi imidlertid skjule rullefeltet uten å deaktivere funksjonaliteten.

Skjul rullefelt i CSS ved å bruke "Webkit-Scrollbar" -egenskap

“Webkit-scrollbar”Pseudo-element kan brukes til å style rullefeltet til et element i CSS. Det hjelper oss også med å skjule rullefeltet. Denne egenskapen fungerer bare på webkit-baserte nettlesere, for eksempel krom, opera, safari, kant, etc.

Syntaks

For å forstå Webkit -egenskapen, må vi først forstå syntaks:

kropp ::-webkit
/ *skjerm, bredde, stil */

WebKit har følgende elementer som tjener forskjellige funksjoner noen er:

• Webkit-Scrollbar: Det brukes til å endre hele rullefeltet.
• Webkit-Scrollbar-Button: Det brukes til å endre de ned-ned venstre-høyre-knappene på rullefeltet.
• Webkit-Scrollbar-Track: Det brukes til å endre sporet av rulling.
• Webkit-scrollbar-tommel: Det brukes til å endre det draggbare rullehåndtaket.
• Webkit-resizer: Det brukes til å endre størrelse på eller endre et draggbart håndtak.

For å skjule rullefeltet, “Webkit-scrollbar”Pseudo-element brukes.

Eksempel: Hvordan skjule rullefeltet i CSS ved hjelp av WebKit -eiendommen?

For å skjule rullefeltet ved hjelp av “Webkit-scrollbar”Eiendom, sett verdien av skjermen til“ingen" som Nedenfor:

Body ::-Webkit-Scrollbar
Display: Ingen;

Nå, på websiden, kan vi bla gjennom den lange nettsiden uten å se rullefeltet:

Rullefeltet har vært skjult, og du kan bla gjennom nettleserinnholdet ved å bruke opp-ned-tastene.

Konklusjon

CSS “flyte”Og“Webkit”Egenskaper lar oss skjule rullefeltet fra websiden. Overløpsegenskapen deaktiverer også funksjonaliteten til rullingen; Imidlertid tillater webkit -eiendommen å bla ved hjelp av piltastene. Denne oppskrivningen forklarte hvordan overløpseiendom og webkit eiendom fungerer i CSS.