Cross-browser method to disable vertical scrolling of window using JS/jQuery

Question

I need to disable window scrolling when I mouseover a specific div and enable it on mouseout. But it's necessary to keep scrollbars, so overflow: hidden will not help.

I wrote a bit of JS, but it's to buggy in IE9 and Opera.

var win_scrolltop, is_mydiv_mouseovered = false;
$('#mydiv').hover(
    function(){
        win_scrolltop = $(window).scrollTop();
        is_mydiv_mouseovered = true;
    },
    function() {
        is_mydiv_mouseovered = false;
    }
)
$(window).scroll(function() {
    if (is_mydiv_mouseovered) $(window).scrollTop(win_scrolltop);
});

score 0 · Accepted Answer · edited May 23 '17 at 11:59

0

I found this answer, fiddled a little and result is this:

var scrollThing = {
    // 33: PageUp, 34: PageDown, 35: End, 36: Home, 37: Left, 38: Up, 39: Right, 40: Down
    keys: [33, 34, 35, 36, 37, 38, 39, 40],
    preventDefault: function(e) {
        e = e || window.event;
        if (e.preventDefault) {
            e.preventDefault();
        }
        e.returnValue = false;
    },
    keydown: function(e) {
        for (var i = scrollThing.keys.length; i--;) {
            if (e.keyCode === scrollThing.keys[i]) {
                scrollThing.preventDefault(e);
                return;
            }
        }
    },
    disable: function() {
        if (window.addEventListener) {
            window.addEventListener('DOMMouseScroll', scrollThing.preventDefault, false);
        }
        window.onmousewheel = document.onmousewheel = scrollThing.preventDefault;
        document.onkeydown = scrollThing.keydown;
    },
    enable: function() {
        if (window.removeEventListener) {
            window.removeEventListener('DOMMouseScroll', scrollThing.preventDefault, false);
        }
        window.onmousewheel = document.onmousewheel = document.onkeydown = null;
    }
}
$('#mydiv').hover(scrollThing.disable, scrollThing.enable);

Working example.

edited May 23 '17 at 11:59

Community

1
1

answered Nov 29 '11 at 12:54

Emre Erkan

8,282
3
46
52

Thanks, but thats swathing in IE and opera too. – artnik Nov 29 '11 at 12:58
Did you try my example (http://jsfiddle.net/karalamalar/arPZX/) in IE and Opera? It works. Maybe there is some other error in your code which prevents running this code? – Emre Erkan Nov 29 '11 at 13:01
mousewheel gives bad effect ! you can disable it's action using the mousewheel jquery plugin. is that right ? – unloco Nov 29 '11 at 13:05
**Emre Erkan** Yes i tried. In IE9 and Opera it's twitches. I tryed to use .mousewheel(function(event)...) and event.preventDefault(); but it doesn't works in IE, but works in Opera – artnik Nov 29 '11 at 13:13
That might stop scrolling using the mouse wheel while hovering over the div, but it doesn't stop scrolling in general. What about touch devices? They don't have a hover event (or mouse wheel event) so the above fails completely. – RobG Nov 29 '11 at 13:25
I updated my answer. It looks like [there is a better way](http://stackoverflow.com/questions/4770025/how-to-disable-scrolling-temporarily) to disable scrolling. – Emre Erkan Nov 29 '11 at 13:26
**Emre Erkan** Thanks! Seems like it works in all browsers, even in IE7! – artnik Nov 29 '11 at 13:35
**Emre Erkan** There an mistake at 9 line in your code above. There should be an e.returnValue instead of event.returnValue – artnik Nov 29 '11 at 13:42
Thanks I fixed it. I appreciate if you [accept the answer](http://meta.stackexchange.com/a/5235/171243). :) – Emre Erkan Nov 29 '11 at 13:42
This does not work consistently. I'm using Chrome latest as of this comment on latest OS X, and when I scroll whilst I move the pointer out of the browser window viewport, it will scroll the page just as the pointer leaves the browser viewport. – thephpdev Dec 04 '15 at 10:41

Cross-browser method to disable vertical scrolling of window using JS/jQuery

1 Answers1