While making custom scrollbars with mootools, I noticed that it isn't
possible to know with mootools whether the scrolling happened in the
vertical or horizontal direction (devices like Apple Mighty Mouse,
Wacom Pen, some touchpads, are all capable of scrolling both ways). As
a result I have never seen fully functional javascript scrollbar
implementations. As an example: recently I made this site:
http://www.feretdubois.be/en/2-metaal/, which has custom javascript
scrollbars capable of scrolling both ways, however, the code I wrote
to make it work lacks in elegance and flexibility, which is what I'd
like to address now.
I have figured out a way to detect the scroll axis on Gecko and WebKit
engined browsers (safari, chrome, firefox ...), but not in Opera
(Presto engine) or Internet Explorer (though I'm not sure Windows is
capable of detecting horizontal scrolling at all):
in the Event.js script:
var Event = new Native({
...
if (type.match(/DOMMouseScroll|mousewheel/)){
var wheel = (event.wheelDelta) ? event.wheelDelta / 120 : -
(event.detail || 0) / 3;
var axis = (event.wheelDeltaX) ? 'x' : (event.axis && event.axis ==
event.HORIZONTAL_AXIS) ? 'x' : 'y'; //wheelDeltaX for WebKit,
event.axis for Gecko
}
...
return $extend(this, {
...
wheel: wheel,
axis: axis,
...
}
});
this adds an 'axis' property to the event, set to either 'x' or
'y' (defaults to 'y').
If anyone knows how to extend this to other Browsers or Engines please
let me know, or if any of the mootools developers should read this,
maybe consider it for the next update.
thanks
klaas
