Using jQuery, I would like to disable scrolling of the body:
My idea is to:
body{ overflow: hidden;} scrollTop();/scrollLeft() Is there a better way?
Update:
Please see my example, and a reason why, at http://jsbin.com/ikuma4/2/edit
I am aware someone will be thinking "why does he not just use position: fixed on the panel?".
Please do not suggest this as I have other reasons.
$("body").css("overflow", "hidden");$("body").css("overflow", "initial");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 ?
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
If want to programmatically disable scrolling you can use:
overflow: clip;
If you wanted to disable scrolling for the user you can use:
overflow: hidden;
https://developer.mozilla.org/en-US/docs/Web/CSS/overflow
The browser support for the overflow property varies: