Come nascondere una barra di scorrimento con JavaScript

February 24

I browser Web reagiscono in modo diverso alle diverse impostazioni del browser a causa del modo in cui le specifiche del browser sono state interpretate o attuate. È possibile nascondere le barre di scorrimento utilizzando JavaScript, ma ci sono diverse impostazioni per cambiare a seconda che il browser dell'utente è Internet Explorer o qualcosa di diverso da IE. Per IE, è possibile nascondere le barre di scorrimento per cambiare il "scroll" attributo del corpo del documento. In altri browser, si nasconde le barre di scorrimento modificando l'attributo di stile "troppo pieno".

istruzione

1 Creare un nuovo file HTML utilizzando un editor o il blocco note. Inserire uno scheletro HTML per il file. Ad esempio, digitare:

<! 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> Nascondi barre di scorrimento </ title>

</ Head>

<Body>

</ Body>

</ Html>

2 Creare una funzione JavaScript e inserirlo tra i tag "testa" del documento HTML. Impostare il troppo pieno stile del documento attribuisce a "nascosto" per i browser diversi da IE e impostare l'attributo di scorrimento del corpo del documento su "no" per Microsoft Internet Explorer. Ad esempio, digitare:

<Script type = "text / javascript">

hideScrollBars function () {

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

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

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

}

</ Script>

</ Head>

3 Creare un modulo con un pulsante che nascondere le barre di scorrimento. Quando un utente fa clic sul pulsante, chiamare la funzione JavaScript che nasconde le barre di scorrimento. Ad esempio, digitare:

<Body>

<Form name = "myForm"> <input type = nome "pulsante" = valore "pulsante" = "Nascondi" onclick = "hideScrollBars ()" /> </ form>

</ Body>

</ Html>


Articoli Correlati