JavaScript barra di scorrimento

May 6

Il linguaggio JavaScript consente di creare una barra di scorrimento personalizzato per il tuo sito web. La barra di scorrimento viene utilizzato all'interno di un div contenitore, in modo da avere una barra di scorrimento separata per le sezioni delle pagine. Utilizzare le librerie JavaScript per costruire e configurare la barra di scorrimento, mentre si progetta la tua pagina.

Scopo

Alcuni progettisti Web richiedono una barra di scorrimento interno a parte la barra di scorrimento del browser sul lato destro della finestra. La barra di scorrimento JavaScript personalizzato permette di scorrere all'interno di un contenitore div, in modo da poter avere un contenuto che si inserisce all'interno di una sezione specifica di dimensioni senza la necessità di ampliare l'altezza della pagina.

div contenitore

Il contenitore div contiene il contenuto per la sezione della pagina Web. È necessario creare il contenitore div per la barra di scorrimento JavaScript per lavorare con le pagine. Il codice che segue è un esempio di un contenitore div:

<Div id = "scrollbar_container">

&lt;div id=&quot;scrollbar_track&quot;>&lt;div id=&quot;scrollbar_handle&quot;>&lt;/div>&lt;/div>
&lt;div id=&quot;scrollbar_content&quot;>Your content goes here&lt;/div>

</ Div>

Il codice precedente utilizza un contenitore per il contenuto e imposta i contenitori div per la barra di scorrimento personalizzato.

JavaScript

Dopo che i contenitori sono costituite, creare il codice JavaScript. È possibile creare diversi effetti per la barra di scorrimento, ma la caratteristica principale che serve è una funzione di scorrimento. Quando l'utente fa clic sulla barra traccia di scorrimento, le informazioni del contenitore viene spostato. Il codice seguente scorre verso il basso di 50 pixel dopo che l'utente fa clic sulla barra di scorrimento:

var barra di scorrimento = new Control.ScrollBar ( 'scrollbar_content', 'scrollbar_track');

$ ( 'Scroll_down_50'). Osservare ( 'click', la funzione (evento) {

scrollbar.scrollBy(-50);
event.stop();

});

considerazioni

I browser più vecchi potrebbero non supportare alcune delle caratteristiche barra di scorrimento impostati. Prima di utilizzare qualsiasi funzione JavaScript, si dovrebbe verificare la documentazione per browser meno recenti, se la barra di scorrimento è parte integrante delle funzionalità pagina Web.