Preparazione

Before initializing the scroller, there are a few things that have to be set up in order for it to work properly. Prima di inizializzare lo scroller, ci sono alcune cose che devono essere impostati in modo per farlo funzionare correttamente.

First thing is the HTML: La prima cosa è il codice HTML:

<div id="Scroller"> <div id="Scroller">

 <div class="Scroller-Container"> <div class="Scroller-Container">

 Insert Text here! Inserisci testo qui!

 </div> </ Div>

</div> </ Div>

Now, "Scroller" can actually be change to anything you want, you just need to be able reference this element. Ora, "Scroller" può in realtà essere cambiamento di tutto quello che vuoi, è solo bisogno di essere in grado di riferimento questo elemento. The div with the class Scroller-Container , however, must have this class name. Il div con la classe Scroller-Container , comunque, deve avere il nome della classe. If it doesn't, the script won't be able to find the content and it will break. Se non lo fa, lo script non sarà in grado di trovare il contenuto e si romperà.

The next bit, is the CSS: Il bit successivo, è il CSS:

#Scroller { # {Scroller

 position: relative; position: relative;

 width: 400px; width: 400px;

 height: 200px; height: 200px;

 overflow: hidden; overflow: hidden;

} }

.Scroller-Container { . Scroller-Container {

 position: absolute; position: absolute;

} }

This is all the CSS that is required. Questo è tutto il CSS che è richiesto. #Scroller must have some sort of positioning set in the CSS, and it must have overflow set to hidden. # Scroller deve avere una sorta di posizionamento impostata nel CSS, e deve avere impostato overflow nascosto. The width and height can be set to anything. Scroller-Container must have position set to absolute, and this is all that is needed. La larghezza e l'altezza può essere fissata a qualsiasi cosa. Scroller-Container deve avere impostato posizione assoluta, e questo è tutto ciò che è necessario.

Constructor Costruttore

 new jsScroller(scrollerWrapper, viewableWidth, viewableHeight); nuovo jsScroller (scrollerWrapper, viewableWidth, viewableHeight);

This is what you use when initializing the jsScroller object. Questo è quello che si utilizza durante l'inizializzazione del jsScroller oggetto. It's quite simple really. E 'abbastanza semplice, in realtà. First, you have to assign it to a variable when making a new jsScroller . In primo luogo, è necessario assegnare a una variabile quando si effettua una nuova jsScroller . The scrollerWrapper is the HTML element that houses the Scroller-Container div. viewableHeight and viewableWidth are the viewable area od the scroller. Il scrollerWrapper è l'elemento HTML che ospita il Scroller-Container div. viewableHeight e viewableWidth are the viewable area od the scroller. 

An example of implementation: Un esempio di applicazione:

var wrapper = document.getElementById("Scroller"); var involucro = document.getElementById ("Scroller");

var scroller = new jsScroller(wrapper, 400, 200); var scroller = new jsScroller (, involucro 400, 200);

Methods Metodi

.scrollTo(x, y) 

This just makes the content jump to the specified coordinates In questo modo solo il contenuto Vai alle coordinate specificate

.scrollBy(x, y) 

This moves the content by a specified amount. Questo sposta il contenuto di una quantità specificata. Positive values make it move up and left. I valori positivi farlo muovere in alto ea sinistra. Negative values make it scroll down and right; I valori negativi fanno scorrere verso il basso ea destra;

.startScroll(x, y) 

This is the same as scrollBy except it repeats over and over until stopScroll is called. Questa è la stessa scrollBy tranne che ripete più volte fino stopScroll viene chiamato.

.stopScroll() 

This stops startScroll . Ciò arresta startScroll .

.swapContent(scrollerWrapper, viewableWidth, viewableHeight) 

This lets you switch what area the scroller controls. Ciò consente di passare i controlli che area scroller. This is done in the same manner as when calling the constructor, except viewableHeight and viewableWidth are not required. Questo viene fatto allo stesso modo come quando si richiama il costruttore, tranne viewableHeight e viewableWidth non sono richiesti.

.reset() 

This just sets everything back to 0 and recalculates. Questo serve solo a impostare tutto a 0 e ricalcola.

Some examples: Alcuni esempi:

scroller.scrollTo(0, 120); scroller.scrollTo (0, 120);

//scrolls up 5px / / Scorre fino 5px

scroller.scrollBy(0, 5); scroller.scrollBy (0, 5);

//events on an image / / Eventi su un'immagine

<img src="up.png" onmouseover="scroller.startScroll(0, 5)" <Img src = onmouseover "up.png" = "scroller.startScroll (0, 5)"

onmouseout="scroller.stopScroll()" /> onmouseout = "scroller.stopScroll ()" />

Examples Esempi

example1.html example1.html 

Quirks Quirks

Horizontal scrolling doesn't work correctly. Lo scorrimento orizzontale non funziona correttamente. I haven't The slightest idea how to fix it either. Non ho la minima idea di come risolvere il problema neanche. No one uses horizontal scrolling anyways, so I'm not in a hurry to figure it out. Nessuno usa comunque scorrimento orizzontale, quindi non ho fretta per capirlo.

Useful Properties Proprietà utili

These are properties that you can access that may help you in making scripts: Queste sono le proprietà che è possibile accedere che potrebbero aiutare a fare gli script:

.viewableWidth, .viewableHeight 

The viewable dimensions of the scroller, as defined by the arguments passed to jsScroller. Le dimensioni della barra di scorrimento visualizzabili, così come definite dagli argomenti passati a jsScroller.

.totalWidth, .totalHeight 

The total dimensions of the scroller content. Le dimensioni totali del contenuto di scorrimento.

._x, ._y 

The position of the content in the scroller. La posizione del contenuto di scorrimento. These are actually negative values, so when using them, you probably want to put a - sign in front to make it positive. Questi sono in realtà valori negativi, così quando li utilizzano, probabilmente avrete bisogno di mettere un segno - davanti per renderlo positivo.