How to programmatically disable page scrolling with jQuery

Question

Using jQuery, I would like to disable scrolling of the body:

My idea is to:

1. Set body{ overflow: hidden;}
2. Capture the current

Answer 1

This may or may not work for your purposes, but you can extend jScrollPane to fire other functionality before it does its scrolling. I've only just tested this a little bit, but I can confirm that you can jump in and prevent the scrolling entirely. All I did was:

• Download the demo zip: http://github.com/vitch/jScrollPane/archives/master
• Open the "Events" demo (events.html)
• Edit it to use the non-minified script source: <script type="text/javascript" src="script/jquery.jscrollpane.js"></script>
• Within jquery.jscrollpane.js, insert a "return;" at line 666 (auspicious line number! but in case your version differs slightly, this is the first line of the positionDragY(destY, animate) function

Fire up events.html, and you'll see a normally scrolling box which due to your coding intervention won't scroll.

You can control the entire browser's scrollbars this way (see fullpage_scroll.html).

So, presumably the next step is to add a call to some other function that goes off and does your anchoring magic, then decides whether to continue with the scroll or not. You've also got API calls to set scrollTop and scrollLeft.

If you want more help, post where you get up to!

Hope this has helped.

Answer 2

To turn OFF scrolling try this:

var current = $(window).scrollTop();
$(window).scroll(function() {
    $(window).scrollTop(current);
});

to reset:

$(window).off('scroll');

Answer 3

If you just want to disable scrolling with keyboard navigation, you can override keydown event.

$(document).on('keydown', function(e){
    e.preventDefault();
    e.stopPropagation();
});

Answer 4

You can also use DOM to do so. Say you have a function you call like this:

function disable_scroll() {
document.body.style.overflow="hidden";
}

And that's all there is to it! Hope this helps in addition to all the other answers!

Answer 5

You can cover-up the window with a scrollable div for preventing scrolling of the content on a page. And, by hiding and showing, you can lock/unlock your scroll.

Do something like this:

#scrollLock {
    width: 100%;
    height: 100%;
    position: fixed;
    overflow: scroll;
    opacity: 0;
    display:none
}

#scrollLock > div {
    height: 99999px;
}

function scrollLock(){
    $('#scrollLock').scrollTop('10000').show();
}

function scrollUnlock(){
    $('#scrollLock').hide();
}

Answer 6

One liner to disable scrolling including middle mouse button.

$(document).scroll(function () { $(document).scrollTop(0); });

edit: There's no need for jQuery anyway, below same as above in vanilla JS(that means no frameworks, just JavaScript):

document.addEventListener('scroll', function () { this.documentElement.scrollTop = 0; this.body.scrollTop = 0; })

this.documentElement.scrollTop - standard

this.body.scrollTop - IE compatibility