My JavaScript book is out! Don't miss the opportunity to upgrade your beginner or average dev skills.

Monday, September 18, 2006

portable and rewrote onmousewheel function

I did a simple version of onmousewheel, then I add JSL and $DOM objects dependencies, then I've came back to single portable version without dependencies that's simpler than first one :D

Concept:
onmousewheel isn't a window or document event, onmousewheel is a generic Element event. While a generic event as onclick, onmouseover, onmouseout is called only above the element, onmousewheel will be called only above the element too, that's all!

No more double events (onmouseover that activates onmousewheel and onmouseout that deactivates onmousewheel) ... just the event.


/**
* function onmousewheel,
* onmousewheel(element:Object [, callback:Function]):Void
* @param Object window, document or DOM.element to use with callback
* @param Function callback function with element scope (.call(...)) and delta wheel value as single parameter
* @return Void
*/
function onmousewheel(element, callback) {

// @author Andrea Giammarchi [http://www.devpro.it/]
// @license MIT [http://www.opensource.org/licenses/mit-license.php]
// @credits Adomas Paltanavicius [http://adomas.org/javascript-mouse-wheel/]

function __onwheel(event) {
var delta = 0;
if(event.wheelDelta) {
delta = event.wheelDelta / 120;
if(window.opera)
delta = -delta;
}
else if(event.detail)
delta = -event.detail / 3;
if(delta)
callback.call(element, delta);
if(event.preventDefault)
event.preventDefault();
event.returnValue = false;
return false;
};

if(element.addEventListener && !window.opera)
element.addEventListener("DOMMouseScroll", __onwheel, false);
else
element.onmousewheel = (function(base){return function(evt){
if(!evt) evt = window.event;
if(base) base.call(element, evt);
return __onwheel(evt);
}})(element.onmousewheel);
};


And here you can view the always updated version or the example page.

4 comments:

Anonymous said...

Ave !
ho letto con molto interesse il tuo post sul resizable div .
Una domanda : è possibile applicare lo scrolling a più div?
Mi spiego meglio : in luogo di lasciare la prima div scrollabile ed il resto del documento fisso, sarebbe possibile dare attributi del tipo :
[div id=test1]bla bla bla[/div]
[div id=test2]bla bla bla[/div]
[div id=test3]bla bla bla[/div]
[div id=test4]bla bla bla[/div]

e renderli tutti scrollabili?

ho provato ad aggiungere nei tag dello script nella head... ma... non sono abbastanza abile... non ho ottenuto nulla...

Se la risposta è si....attendo notizie... Grazie, Fabio

Andrea Giammarchi said...

just use onmousewheel(each_div, callback_func) on onload event but please write in English.

jils said...

Thanks Andrea! This wrapper fxn is great to be able to hook up the scroll wheel to specific elements without having to worry about all the browser inconsistencies. Thanks!

Unknown said...

Unless I did not understand how to implement an indication of Andrea Giammarchi about use his function with multi div - he said: , just use onmousewheel(each_div, callback_func) on onload event , it is possible to have an example? Many thanks and excuse me for my English. Ute from Germany