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

The only way I've found to do this is similar to what you described:

1. Grab current scroll position (don't forget horizontal axis!).
2. Set overflow to hidden (probably want to retain previous overflow value).
3. Scroll document to stored scroll position with scrollTo().

Then when you're ready to allow scrolling again, undo all that.

Edit: no reason I can't give you the code since I went to the trouble to dig it up...

// lock scroll position, but retain settings for later
var scrollPosition = [
  self.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft,
  self.pageYOffset || document.documentElement.scrollTop  || document.body.scrollTop
];
var html = jQuery('html'); // it would make more sense to apply this to body, but IE7 won't have that
html.data('scroll-position', scrollPosition);
html.data('previous-overflow', html.css('overflow'));
html.css('overflow', 'hidden');
window.scrollTo(scrollPosition[0], scrollPosition[1]);


// un-lock scroll position
var html = jQuery('html');
var scrollPosition = html.data('scroll-position');
html.css('overflow', html.data('previous-overflow'));
window.scrollTo(scrollPosition[0], scrollPosition[1])

Answer 2

I think the best and clean solution is:

window.addEventListener('scroll',() => {
    var x = window.scrollX;
    var y = window.scrollY;
    window.scrollTo(x,y);
});

And with jQuery:

$(window).on('scroll',() => {
    var x = window.scrollX;
    var y = window.scrollY;
    window.scrollTo(x,y)
})

Those event listener should block scrolling. Just remove them to re enable scrolling

Answer 3

I am using the following code to disable scrolling and it works fine

    $('html').css({
      'overflow': 'hidden',
      'height': '100%'
    });

except that on my android tablet, url address bar and top window tags remain visible, and when users scroll up and down, the window also scrolls for about 40px up and down, and shows/hides the url bar and the tags. Is there a way to prevent that and have scrolling fully disabled ?

Answer 4

Try this code:

    $(function() { 
        // ...

        var $body = $(document);
        $body.bind('scroll', function() {
            if ($body.scrollLeft() !== 0) {
                $body.scrollLeft(0);
            }
        });

        // ...
    });

Answer 5

• To Hide Scroll: $("body").css("overflow", "hidden");
• To Restore Scroll: $("body").css("overflow", "initial");

Answer 6

Can't you just set the body height to 100% and overflow hidden? See http://jsbin.com/ikuma4/13/edit