Question

I know this is a bad idea but it's what the client has asked for so....

i'm using mootools to override the window mouse wheel scroll event, so basically when the user scrolls the wheel i'm preventing the default action and then using a morph to scroll the window.

The problem is the preventDefault() on the wheel event seems to still interrupt the morph on the window scroll. So the window starts animating to the bottom but if you use the wheel wheel this is happening it stops the morph.

Is there a way around this? I've seen other sites which seem to get this to work.

window.addEvent('mousewheel', function(e){
    e.preventDefault();
    scroll.toBottom();
})
Was it helpful?

Solution

The Mootools FX.scroll() has a option for the mousewheel actually, it says:

wheelStops - (boolean: defaults to true) If false, the mouse wheel will not stop the transition from happening.

I made a demo with that and it worked ok. I had a first idea to use the Core Fx's method .isRunning(), but that alone didn't do the work.

Actually, and a bit surprising, I got the smoothest effect using both. The isRunning() logs on the console when the wheelStops is to false, but logs undefined if it is true (default).

var scroll = new Fx.Scroll('theElementsID', {
    duration: 'long',
    wheelStops: false
});

window.addEvent('mousewheel', function (e) {
    var isRunning = scroll.isRunning();
    if (scroll.isRunning()) e.preventDefault();
    scroll.toBottom();

})

Demo

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top