CSS fjerner rullefeltet
Eksempel 01:
La oss ta på HTML for å lage en automatisk rullefelt på websiden. For dette trenger du ikke legge til mange egenskaper eller andre tagger enn vanlige vanlige tagger for avsnitt og overskrifter. Vi har startet dette eksemplet med opprettelsen av en ny HTML -fil som heter “CSS”. Ved å åpne denne filen i Visual Studio -koden, har vi begynt å legge til et HTML -skript til den. Den aller første taggen vi har lagt til i den er "HTML" hovedtaggen etterfulgt av "hodet" og "kropp" -merket.
Når vi ser på kroppen på denne HTML -siden, har den en overskrift av den nest største størrelsen (i.e., H2), og to avsnitt via “P” -kodene. Første avsnitts-taggen inneholder en lang teksttype-data som flytter til neste linje mens andre avsnitt inneholder en enkel en-linjedata. Andre avsnitt inneholder også en enkel "sterk" tag i den for å gjøre to ord fet skrift. Innenfor "stil" -merket til "hode" har vi satt verdien for høyden og bredden på en hel "kropp" på henholdsvis en HTML -side: 500px og 1000px.
Lagre det nettopp la HTML -skriptet med Ctrl+S, trykk på "Run" -menyen fra Visual Studio Taskbar, og klikk på "Kjør uten feilsøking". Det vil be om verktøyet som koden vår skal utføres. Velg "Chrome" nettleseren, så er du god til å gå. Utgangen nedenfor har vist at overskriften og dens to avsnitt er vist. På grunn av veldig lange tekstdata i første ledd og bruk av små vinduer i Chrome, har vi fått den automatiske rullefeltet som genereres til høyre og nederst i nettleseren. Dette er fordi enhver nettleser har innebygde rullefelt som vil bli generert ved bruk av en stor mengde data.
Nå, for å se den gjenværende linjen på nettsiden, bla til høyre ved å bruke rullefeltet som vist.
La oss prøve å fjerne rullefeltet fra websiden. Vi vil bruke overløpseiendommen som er satt til "skjult" innenfor stilkoden for "kroppen" på en webside. Det lar ikke nettleseren generere automatiske rullefelt selv om vi legger til en stor mengde data på nettsiden. La oss redde og kjøre det.
Etter å ha utført den i Chrome -nettleseren, har vi utdataene som vi forventet. Selv om første ledd inneholder de lange tekstdataene, har nettleseren ikke generert rullefelt for å se den gjenværende skjulte linjen. Det tredje avsnittet er også skjult i dette størrelsesvinduet.
Ved å endre størrelsen på Chrome -nettleseren ved hjelp av musepekeren, er tredje ledd vist nå som vist nedenfor.
Når vi forstørrer nettleservinduet fra høyre side, vises resten av den skjulte linjen uten bruk av noen rullefelt.
Eksempel 2:
La oss lage et annet kort eksempel for å se hvordan vi kan lage mer enn 1 rullefelt for forskjellige delte seksjoner på en HTML -side. Vi vil også se hvordan vi også kan fjerne en av disse rullefeltene. Fra og med HTML -taggen har vi lagt til to “Div” -koder i “Body” hovedtaggen. Den første "div" -merket er spesifisert med klassen "A" for differensiering på stylingnivå. Den andre "div" -merket har ikke brukt "klassen" fordi vi har brukt den in-line stylingen for denne spesielle taggen. Vi bruker den spesifikke høyden på 10px og bakgrunnsfargede egenskaper for å fargelegge seksjonen “lilla”. Denne "div" -delen inneholder to linjer. En av dem er merket med "Mark" -merket. "Mark" -merket brukes til å fremheve teksten som er spesifisert i den til gul farge og gjøre den fremtredende på websiden. Vi har lagt til den markerte linjen, da denne taggen vil bruke rullefeltet. Begge "div" -merker er avsluttet her etter "merket" -merket. Kroppskoden har også blitt stengt her.
La oss se på stilkoden som brukes i hodemerket til dette HTML -skriptet. Vi har brukt klassen “A” for å style den ytre "Div" -delen. Vi setter bredden på rullefeltet til "Ingen" for den ytre "Div" -delen ved å bruke rullefelt-bredden og overløpet i den vertikale retningen har blitt aktivert ved å sette "rulle" -verdien for eiendom "overløp-y". Sammen med det har vi satt den maksimale høyden på en ytre "div" -seksjon til 100px ved å bruke maksimal egenskap for klassen “A”. Stilen og hodemerket er fullført her, og vi har lagret koden vår for å teste utdataene i Chrome -nettleseren via Visual Studio Code.
Nettsiden for dette HTML-skriptet vil se ut som vist på bildet nedenfor. Rullbaren for den andre "Div" -delen av lilla farge med 10px høyde er blitt generert i den andre "Div" -delen på grunn av høyden, 150px. Teksten som brukes i den blir også fremhevet med bruk av "Mark" -merket. På den annen side har den ytre “Div” -delen ingen synlig rullefelt generert i denne vindusstørrelsen. Det er fordi vi setter verdien for "rullebredde" -egenskapen til ytre "div" til "ingen".
Du kan gjøre rullefeltet synlig ved å endre størrelsen på et vindu for lite som vist. Bare den vertikale rullefelt. Selv om du forkorter vinduet fra høyre side, ville den horisontale rullefeltet aldri bli generert.
La oss prøve å fjerne den automatiske vertikale rullefeltet fra websiden også. For dette vil vi prøve den samme HTML-koden ved å oppdatere verdien av eiendommen “Overflow-y”. Vi har satt den til "ingen" slik at ingen vertikal stang for den ytre "div" -delen vil bli generert.
Uten å oppdatere noen annen ting i dette skriptet, har vi utført det og fått den vist-below-utgangen. Selv om vi endrer størrelsen på et kromvindu til mye mindre fra venstre-høyre eller topp-bunn, vil det ikke generere noen vertikale eller horisontale rullefelt for den ytre "div".
Konklusjon:
Dagens artikkel er en samling av noen HTML -eksempler for å illustrere hvordan nettlesere genererer automatiske rullefelt og hvordan du kan fjerne dem fra nettleseren. Innenfor det første eksemplet har vi prøvd avsnittkodene for å legge til en stor mengde data for automatisk å generere rullefelt og brukt overløpsegenskapen for å skjule disse rullefeltene. Sammen med det har vi prøvd å spesifikt fjerne en-retningsrollelinjene fra websiden ved å bruke "Overflow-y" -egenskapen til HTML-sider. Bruken av "div" -seksjonene var ganske hjelp gjennom hele tiden.