Disable scrolling but still raise the event in Javascript

Question

Before you say anything I realise there is already very similar questions but they don't give me exactly what I need.

My question is how do I in Javascript stop the user from scrolling but I still get to raise the event with something like this.

window.onload = function()
{
    //adding the event listerner for Mozilla
    if(window.addEventListener)
        document.addEventListener('DOMMouseScroll', moveObject, false);

    //for IE/OPERA etc
    document.onmousewheel = moveObject;
}
function moveObject(event)
{
    //CODE
}

EDIT: And then I need to enable the user to scroll again.

So you mean like physically prevent the page from scrolling? — Ian, Oct 18 '12 at 22:32
To re-enable scrolling, you can use `document.removeEventListener`. Or you could have your handler check a global variable or DOM element that you update to indicate whether scrolling should be allowed. — Barmar, Oct 18 '12 at 22:46

score 1 · Accepted Answer · answered Oct 18 '12 at 22:36

1

You will need to return false; from your event handler.

function moveObject(event)
{
    //CODE
    return false;
}

answered Oct 18 '12 at 22:36

Kevin Boucher

16,426
3
48
55

Are you sure you don't mean `event.preventDefault()`? – Ian Oct 18 '12 at 22:37
Well it worked now I only need a way to restart it but that I can figure out easily enough thanks. and @ianpgall that would stop raising the event. – Joao Silva Oct 18 '12 at 22:42
1

@ianpgall Returning false from an event handler is equivalent to calling `event.preventDefault()` and `event.stopPropagation`. – Barmar Oct 18 '12 at 22:45
@Barmar Are you sure? I thought that was a jQuery-only thing that did both. That's fine if I'm wrong, I just thought you'd need to call each separately if not using jQuery – Ian Oct 18 '12 at 22:47
@ianpgall Returning false is the original way to prevent the default actions. The functions came later, but the return is maintained for compatibility – Barmar Oct 18 '12 at 22:50
@Barmar Cool, I thought it was the other way around. Good to know, thanks! – Ian Oct 18 '12 at 22:50
@Barmar Actually, I don't think `return false;` works - it seems to do the same as `preventDefault` only. Take a look at this fiddle: http://jsfiddle.net/TsvSx/1/ . Notice how the form isn't submitted, but all the click handlers are run, so `stopPropagation` doesn't seem to be a part of `return false;`. – Ian Oct 18 '12 at 23:08
@ianpgall You're confusing `stopPropagation` with `stopImmediatePropagation`. `stopPropagation` prevents bubbling up the DOM, `stopImmediatePropagation` prevents other handlers on the same element from running. `return false` doesn't do `stopImmediatePropagation`. – Barmar Oct 18 '12 at 23:14
@Barmar No, I know the difference between the propagation types. In the fiddle, there's only one handler per element, so `stopImmediatePropagation` is irrelevant. What I'm saying is that when you `return false` from a normal Javascript event handler, it does NOT stop propagation (as you claimed in your comment) - if you click on the button in my fiddle, it propagates to the `container` div even though it returns false. All `return false;` does is stop the default behavior (submitting the form in this case), but I obviously haven't tested for how it handles immediate propagation. – Ian Oct 18 '12 at 23:18
@ianpgall You're right. Found this question that explains it: http://stackoverflow.com/questions/10452032/why-does-returning-false-stop-propagation-with-jquery-while-it-doesnt-with-pojs – Barmar Oct 18 '12 at 23:26
@Barmar (I wasn't trying to be right, just wanted to know the real answer) Here's another link I found - http://stackoverflow.com/questions/1357118/event-preventdefault-vs-return-false – Ian Oct 18 '12 at 23:29

Disable scrolling but still raise the event in Javascript

1 Answers1