How to programmatically disable page scrolling with jQuery

This will completely disable scrolling:

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

To restore:

$('html, body').css({    overflow: 'auto',    height: 'auto'});

Tested it on Firefox and Chrome.

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 latervar 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 thathtml.data('scroll-position', scrollPosition);html.data('previous-overflow', html.css('overflow'));html.css('overflow', 'hidden');window.scrollTo(scrollPosition[0], scrollPosition[1]);// un-lock scroll positionvar html = jQuery('html');var scrollPosition = html.data('scroll-position');html.css('overflow', html.data('previous-overflow'));window.scrollTo(scrollPosition[0], scrollPosition[1])

try this

$('#element').on('scroll touchmove mousewheel', function(e){  e.preventDefault();  e.stopPropagation();  return false;})