Slik skjuler en Scrollbar med Javascript

Weblesere reagerer forskjellig på forskjellige nettleserens innstillinger på grunn av måten nettleseren spesifikasjonene har blitt tolket eller gjennomført. Du kan skjule rullefelt ved hjelp av Javascript, men det er forskjellige innstillinger for å endre basert på om brukerens nettleser er Internet Explorer eller noe annet enn IE. For IE kan du skjule rullefelt ved å endre "bla" egenskap av dokumentet kroppen. I andre nettlesere, gjemt deg scrollbars ved å endre "overflow" stil attributtet.

Bruksanvisning

1 Opprett en ny HTML-fil ved hjelp av en redaktør eller Notisblokk. Skriv inn HTML-skjelett for filen. For eksempel inn:

<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<Html xmlns = "http://www.w3.org/1999/xhtml">

<Head>

<Meta http-equiv = "Content-Type" content = "text / html; charset = utf-8" />

<Title> Skjul rullefelt </ title>

</ Head>

<Body>

</ Body>

</ Html>

2 Opprett en Javascript-funksjon og sette det mellom "hodet" tagger i HTML-dokumentet. Angi dokument stil overløp attributter til "skjult" for ikke-IE nettlesere og sette rulle egenskap av dokumentet kroppen til "nei" for Microsoft Internet Explorer. For eksempel inn:

<Script type = "text / javascript">

funksjons hideScrollBars () {

document.documentElement.style.overflowX = "hidden";

document.documentElement.style.overflowY = "skjult";

document.body.scroll = "no"; // Internet Explorer

}

</ Script>

</ Head>

3 Lag et skjema med en knapp som vil skjule rullefeltene. Når en bruker klikker på knappen, kaller Javascript-funksjonen som skjuler rullefeltene. For eksempel inn:

<Body>

<Form name = "MyForm"> <input type = "button" name = "button" value = "Skjul" onclick = "hideScrollBars ()" /> </ form>

</ Body>

</ Html>