Menu
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:
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])
try this
$('#element').on('scroll touchmove mousewheel', function(e){
e.preventDefault();
e.stopPropagation();
return false;
})
I just provide a little tuning to the solution by tfe. In particular, I added some additional control to ensure that there is no shifting of the page content (aka page shift) when the scrollbar is set to hidden.
Two Javascript functions lockScroll() and unlockScroll() can be defined, respectively, to lock and unlock the page scroll.
function lockScroll(){
$html = $('html');
$body = $('body');
var initWidth = $body.outerWidth();
var initHeight = $body.outerHeight();
var scrollPosition = [
self.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft,
self.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
];
$html.data('scroll-position', scrollPosition);
$html.data('previous-overflow', $html.css('overflow'));
$html.css('overflow', 'hidden');
window.scrollTo(scrollPosition[0], scrollPosition[1]);
var marginR = $body.outerWidth()-initWidth;
var marginB = $body.outerHeight()-initHeight;
$body.css({'margin-right': marginR,'margin-bottom': marginB});
}
function unlockScroll(){
$html = $('html');
$body = $('body');
$html.css('overflow', $html.data('previous-overflow'));
var scrollPosition = $html.data('scroll-position');
window.scrollTo(scrollPosition[0], scrollPosition[1]);
$body.css({'margin-right': 0, 'margin-bottom': 0});
}
where I assumed that the <body> has no initial margin.
Notice that, while the above solution works in most of the practical cases, it is not definitive since it needs some further customization for pages that include, for instance, an header with position:fixed. Let's go into this special case with an example. Suppose to have
<body>
<div id="header">My fixedheader</div>
<!--- OTHER CONTENT -->
</body>
with
#header{position:fixed; padding:0; margin:0; width:100%}
Then, one should add the following in functions lockScroll() and unlockScroll():
function lockScroll(){
//Omissis
$('#header').css('margin-right', marginR);
}
function unlockScroll(){
//Omissis
$('#header').css('margin-right', 0);
}
Finally, take care of some possible initial value for the margins or paddings.
you can use this code:
$("body").css("overflow", "hidden");
To turn OFF scrolling try this:
var current = $(window).scrollTop();
$(window).scroll(function() {
$(window).scrollTop(current);
});
to reset:
$(window).off('scroll');
I've written a jQuery plugin to handle this: $.disablescroll.
It prevents scrolling from mousewheel, touchmove, and keypress events, such as Page Down.
There's a demo here.
Usage:
$(window).disablescroll();
// To re-enable scrolling:
$(window).disablescroll("undo");
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With