Nwlapcug.com


Come controllare le barre di scorrimento con Javascript

Come controllare le barre di scorrimento con Javascript


Dal momento che JavaScript è un linguaggio lato client che viene eseguito nel browser comuni, può essere utilizzato per visualizzare pagine web interattive. JavaScript può essere usato per controllare la funzionalità della finestra di barra di scorrimento di una pagina web. Infatti, è possibile creare una finestra popup che senza le barre di scorrimento non ha affatto usando JavaScript. In ordine per JavaScript offrire questo livello di interattività, tuttavia, deve essere collegato ai file JavaScript e CSS.

Istruzioni

1

Aprire l'applicazione di editor HTML e dichiarare 2 div nel documento denominato "scrollbar" e \"Scroll". Divs sono tag che definiscono le divisioni logiche su pagine web all'interno di un contenuto della pagina web e possono essere aggiunti allo stesso modo come tabelle e celle di tabella vengono aggiunti. Gli elementi della barra di scorrimento prima pagina HTML dovrebbero assomigliare a questo:

< html >
< head >
< title > Controlling Scrollbars con JavaScript < / piastrelle >
< / head >
< corpo >
...
< div id = \ "scrollholder\" classe = \ "scrollholder\" >
< div id = \ "scroll\" classe = \ "scroll\" >
... posto tuo lo scorrimento contenuto qui...
< / div >
< / div >
< script tipo = \ "testo/javascript\" >
<!...
ScrollLoad (\"scrollholder\", \"scroll\", true)
VAI
-->
< / script >
...
< / body >

Posizionare il contenuto della pagina web in 2 div.

2

Dichiarare i file CSS e JavaScript nell'intestazione della pagina HTML come segue:

< head >
...
< link rel = \ "stylesheet\" tipo = \ "testo/css\" href=\"scroll.css\" mce_href=\"scroll.css\" media = \ "schermo, projection\" / >
< script tipo = \ "testo/javascript\" lingua = \ "JavaScript\" src=\"scroll.js\" mce_src=\"scroll.js\" >< / script >
...
< / head >

Posizionare gli elementi del secondo e altre barre di scorrimento della pagina HTML come segue:

...
< div id = \ "scrollholder2\" classe = \ "scrollholder\" >
< div id = \ "scroll2\" classe = \ "scroll\" >
... posto tuo lo scorrimento contenuto qui...
< / div >
< / div >
< script tipo = \ "testo/javascript\" >
<!...
ScrollLoad (\"scrollholder2\", \"scroll2\", false)
VAI
-->
< / script >
...

3

Creare il file "Scroll.js" e copiare il codice seguente nel file:

/ numero di scorrimento oggetti /
documento. No = 0
VAI

var isOpera = (window.navigator.userAgent.indexOf(\"Opera\") > -1)
VAI

funzione ScrollLoad (Area, contenuto, SettingTracSize)
{

var code = \&quot;var scroller\&quot; + document.No + \&quot; = new dw_scrollObj (Area, Content, Content, Area, document.No);\&quot;

VAI

if (SettingTracSize)
code += \&quot;scroller\&quot; + document.No + \&quot;.setBarSize();\&quot;

VAI

eval (code)

VAI

makeMouseWheeleScrolling(Area)

VAI

document.No++

VAI
}

/ < wheele di scorrimento del Mouse > /
var mouseWheelTimer = 0
VAI

funzione makeMouseWheeleScrolling(objName)
{

var obj = document.getElementById(objName)

VAI

if (obj.addEventListener)
{
obj.addEventListener(\&quot;DOMMouseScroll\&quot;, wheel, false)

VAI

}
obj.onmousewheel = wheel

VAI
}

funzione moveUp(parent)
{

dw_scrollObj.initScroll(parent.id, \&quot;up\&quot;)

VAI

clearInterval(mouseWheelTimer)

VAI

mouseWheelTimer = setTimeout(\&quot;mouseStop('\&quot; + parent.id + \&quot;');\&quot;, 200)

VAI
}

funzione moveDown(parent)
{

dw_scrollObj.initScroll(parent.id, \&quot;down\&quot;)

VAI

clearInterval(mouseWheelTimer)

VAI

mouseWheelTimer = setTimeout(\&quot;mouseStop('\&quot; + parent.id + \&quot;');\&quot;, 200)

VAI
}

funzione mouseStop(parentId)
{

dw_scrollObj.stopScroll(parentId)

VAI

mouseWheelTimer = 0

VAI
}

/ funzioni della rotella del mouse per scorrere il mouse ruota efect sopra oggetto con mio scrollbar js /
maniglia di funzione (delta, padre)
{

var s = delta + \&quot;: \&quot;

VAI

if (delta &lt; 0)
{

Se (isOpera)
moveUp(parent);
altro
moveDown(parent)
VAI

}
else
{

Se (isOpera)
moveDown(parent)
VAI
altro
moveUp(parent)
VAI

}

}

funzione wheel(event)
{

var delta = 0

VAI

if (!event) event = window.event

VAI

if (event.wheelDelta)
{
delta = event.wheelDelta/120;
if (window.opera) delta = -delta

VAI

}
else if (event.detail)
{
delta = -event.detail/3

VAI

}
if (delta)
handle(delta, this)

VAI
}
/ < / rotellina del mouse > /

4

Garantire a tutti i tuoi file vengono salvati nella stessa cartella ed eseguire la pagina HTML per testare.

Consigli & Avvertenze

  • Altre funzionalità possono essere aggiunti come è mostrato dal sito Gondo Web Designer (Vedi risorse).