Fjern den horisontale rullefeltet CSS

For å skjule eller fjerne en rullefelt fra websiden hvis webdesignet ditt tillater den, er CSS en teknologi som gjør det enkelt å få rullefeltet til et HTML -element til å forsvinne. Avhengig av brukssaken din, er det flere metoder for å gjøre det. Når lengden eller bredden på innholdet på en webside overstiger det synlige nettleserområdet, vises rullefelt automatisk som standard i nettlesere. Derfor vil ingen rullefelt vises hvis innholdet ikke overskrider de horisontale og vertikale grensene/grensene for nettleserens vindu.

Hvorfor fjerne rullefeltet?

Selv om det ikke anbefales i webdesign å endre standard nettleseratferd, er det tider når det er nødvendig. For eksempel kan en rullefelt som dukker opp når innholdet av et element, kan være vanskelig å oppfatte hvis det opptar en liten del av en webside. I tillegg er det kanskje ikke fornuftig å fjerne rullefeltet fordi du som webdesigner ikke tenker på å bla på en webside. Uansett begrunnelse for CSS-rullefelt skjul, bør kompatibilitet på tvers av nettleser vurderes. I tillegg, etter å ha gjemt rullefeltet, kan du forhåndsvise nettstedet for å sikre at det fungerer som beregnet på stasjonære og mobile enheter.

Fjerning av rullebar i CSS:

Innhold som overskrider grensene for beholderen, kan håndteres ved hjelp av overløpsattributtet i CSS. Hvis innholdet i et element er større enn den tilgjengelige plassen, kan du bruke denne egenskapen til å klemme, skjule eller bla innholdet. Funksjoner for håndtering av rullbar overløp i visuelle medier er inkludert i denne CSS -modulen. I CSS oppstår overløp når innholdet til en beholder går forbi en eller flere av beholderens kanter. I hovedsak spesifiserer det hva som skjer når innholdet til et element er for stort til å passe innenfor blokkeringskonteksten.

Overstrømningsegenskapen til CSS støtter følgende verdier:

bil: Å legge til en rullefelt, men det vil bare gjøre det hvis innholdet overstiger det rullbare området.

synlig: For å aktivere innhold å vises selv når det strømmer over.

bla: For å klippe innholdet og se det gjenværende innholdet, vil det legge til en rullefelt.

skjult: Det vil vise det synlige innholdet, og det gjenværende innholdet vil bli skjult.

Klipp: Det pinner innholdet til et element til boksen.

Vi kan angi rullefeltverdiene med overløp-x for å kontrollere den horisontale rullefeltet, overløp for den vertikale rullefeltet og overløpet vil støtte begge deler.

Eksempel 01: Skjuler den horisontale rullefeltet i CSS

La oss starte med det grunnleggende eksemplet på å fjerne rullefeltet fra websiden ved hjelp av CSS. Dessverre er det ikke en spesifikk CSS -regel som kan brukes til å få rullefeltet til å forsvinne og likevel tillater brukere å bla en side eller element. Med bruk av noen få regler for nettleserspesifikk CSS, er dette fortsatt mulig. Bruk følgende CSS på kroppen på websiden (for hele siden) eller et enkelt element for å skjule eller fjerne rullefeltet og opprettholde rullefunksjonaliteten.

Som sett over, kan vi bruke forskjellige måter for å få rullefeltene til å forsvinne i forskjellige nettlesere. I eksemplet ovenfor er elementet et spesifikt område eller velger du vil fjerne rullefeltene. I dette eksemplet vil vi lage en enkel prøveside for å vise deg hvordan du kan skjule den horisontale rullefeltet, men rullingsfunksjonaliteten vil fungere. Vi oppretter en websideside ved å bruke> tagger. Inne i disse taggene vil vi lage hode- og kroppselementer for å definere roten og kroppen til elementet.

Attributtet 'Display: None' vil få baren til å forsvinne uten å påvirke dens rullefunksjonalitet.

For å skjule den horisontale rullefeltet, vil vi la innholdet vårt overskride den horisontale grensen på siden. For dette vil vi bruke "White-Space: Nowrap;" Dette lar teksten forbli på samme linje til vi bruker break line -taggen. I eldre nettlesere som 'Internet Explorer', vil vi sette 'Attributt -MS-Overflow-stil: ingen'. Mens vi er i moderne nettlesere, som i Firefox, kan vi bruke 'rullebredde: ingen' og for krom og andre moderne nettlesere, 'vis: ingen' kan brukes. Når innholdet strekker seg utover blokknivåelementets horisontale grenser, bestemmer Overflow-X CSS-egenskapen hvilke visninger.

Vi kan gjøre det samme for DIV -elementene ved å bruke DIV -velgere i CSS.

Ved å bruke koden ovenfor, får vi en webside som følger:

Som du kan se, er dette det samme som den forrige, men denne gangen brukte vi Div -velgerne for å skjule rullefeltene i containerne. Vi har stilisert DIV ved å spesifisere grensen til å være 5px solid svart, grense-radius 5px, høyde på 150px og bredde på DIV-beholderen til å være 300px.

Eksempel 02: Fjerning av rullefeltet og deaktiverer funksjonaliteten i CSS

Gjennom sin CSS -overløpsfunksjon gjør CSS muligheten til både å forsvinne rullefeltet og deaktivere rulling. Å håndtere innholdet som overstiger grensene for beholderen, administreres av disse egenskapene. Å skjule den horisontale rullefeltet kan være nyttig fordi horisontal rulling ofte er et forferdelig valg. Ved å bruke 'Overflow-X: Hidden', kan vi få den horisontale rullefeltet til å forsvinne og stoppe horisontal rulling. Vi la ganske enkelt til "Overflow: Hidden" -regelen til kroppen til et containerelement for å slutte å bla mens du bruker denne attributtet. Dette vil skjule alt materiale som strekker seg forbi elementets grense.

Ved å bruke denne koden vil vår horisontale rullefelt forsvinne, og vi vil ikke kunne bla til venstre eller høyre.

Som du kan se, har du å bruke 'Overflow-X: Hidden' fjernet den horisontale rullefeltet, så vel som funksjonaliteten for å bla til venstre eller høyre.

For å vise materiale som utvider grensene for beholderen, bruk imidlertid overløp: synlig som et alternativ.

Som du ser, overskrider bildet grensene for beholderen.

Eksempel 03: Fjern den horisontale rullefeltet til vi trenger det

I noen situasjoner kan det å skjule rullefeltet forbedre designet ditt. I andre tilfeller kan det å slette denne delen av siden gjøre brukeropplevelsen verre. Flertallet av besøkende forbinder en rullefelt med rullingens handling. Derfor kan det virke uvanlig for andre hvis du bruker denne teknikken på hele nettstedet. I tillegg indikerer rullefelt hvor mye av siden som fremdeles er synlig. Mangelen på en rullefelt kan være avskyelig med mindre du har en annen visuell signal som det fortsatt er mer innhold å se. Brukertesting kan avsløre hvordan fraværet av en rullebar påvirker nettstedets brukeropplevelse, selv om det i mange situasjoner skjuler rullefeltet til brukeren begynner å rulle er et smart kompromiss.

Ettersom overløpet er satt til auto, vil ikke stolpene vises hvis innholdet ikke er større enn grensene for nettleservinduet.

Som du kan se, er det ingen horisontale rullefelt da grensen ikke er overskredet. Når grensen er overskredet, vises rullefeltet på skjermen for rulling.

Som du kan se i HTML -koden, innholdet i

er større enn forrige eksempel, så den horisontale rullefeltet vises i bunnen.

Rullefeltet legges til av bilinnstillingen, men den vises ikke med mindre det er innholdsstrømning. Som et resultat vises den skjulte rullefeltet bare når det er nødvendig.

Konklusjon

Siden det letter navigasjonen, er rullefeltet en nyttig visuell indikator for de fleste besøkende. Imidlertid kan du under noen omstendigheter med vilje skjule det for å forbedre eller endre design. Med bare noen få prinsipper fra artikkelen vår, kan du bruke CSS for å skjule rullefeltet på en side eller HTML -element. I denne opplæringen har vi lært å skjule rullefeltet og hvordan denne funksjonen fungerer i forskjellige nettlesere. Nå, etter å ha fullført denne opplæringen, skal du enkelt kunne fjerne eller skjule rullefeltene selv.