Rimozione di una barra di scorrimento verticale in JavaScript

July 31

Barre di scorrimento danno agli spettatori del tuo sito web un modo semplice per navigare lunghi blocchi di testo, se non hanno i monitor abbastanza grande per visualizzare tutti i contenuti simultaneamente, ma su un sito web progettato con cura le barre di scorrimento automatico può essere sgradevole e inutile. Poiché le barre di scorrimento possono essere controllati tramite CSS, possono essere rimossi al volo tramite JavaScript, facendo uso di "stile" di JavaScript attributi.

istruzione

1 Aprire il codice sorgente della tua pagina web in un editor HTML o un editor di testo come quello fornito con il sistema operativo. Nell'intestazione della pagina web (il codice tra il "<head>" e "</ head>" tag) aggiungere il seguente codice, la creazione di una funzione JavaScript per nascondere le barre di scorrimento:

<Script type = "text / javascript">

<! -

hidescrollbars funzione (id) {

document.getElementById (id) .style.overflow = "hidden";

}

->

</ Script>

2 Scorrere verso il basso per l'elemento di pagina attualmente visualizzata con una barra di scorrimento e controllare il dell'elemento "id"; se non ne ha uno, aggiungere un tag unico - per esempio: "<div id = 'this_is_a_unique_id' class = '...' style = '...'>" assegnerà il "this_is_a_unique_id" id al div.

3 Aggiungere una nuova riga dopo il tag dell'elemento con un tag semplice <div> utilizzato per attivare l'occultamento delle barre di scorrimento dell'altro elemento utilizzando il suo ID univoco di chiusura. Per esempio:

<Div style = "border: 2px solid black;" onclick = "hidescrollbars ( 'this_is_a_unique_id)"> Nascondi </ div>

Change "this_is_a_unique_id" per l'ID dell'elemento.

4 Salvare il file e aprire la pagina web nel browser; quando si fa clic sul pulsante "Hide" nel documento, la barra di scorrimento verticale collegato all'altro elemento scomparirà.

Consigli e avvertenze

  • I hidescrollbars () può essere chiamato da altri eventi JavaScript pure; per esempio, per nascondere la barra di scorrimento di un elemento <div> quando questo elemento quando il lettore si muove il mouse su di esso, aggiungere la riga "onMouseOver = hidescrollbars ( 'this_is_a_unique_id')" come un attributo del tag di apertura di quel elemento.
  • Per nascondere le barre di scorrimento per impostazione predefinita, o quando la pagina viene caricata, l'uso di CSS invece: all'interno tag di apertura dell'elemento, aggiungere il seguente attributo: "style = 'overflow: hidden;'" per evitare che la barra di scorrimento da carico, in primo luogo.