I want to disable scrolling for my webpage, but completely, not just disable scrollbars so
overflow: hidden
will not work.
Also this workaround does not apply on Macs due to the soft-scroll on edges. It will show a terrible shaky animation:
window.onscroll = function () {
window.scrollTo(0,0);
}
Is there any other method to disable scrolling completely?
Presuming the simplified HTML code is:
<html><body><div class=wrap>content...</div></body></html>
Set both body, html to height:100%;
body, html {height:100%;}
Put a div inside body, and set it to stretch across all the body height:
div.wrap {height:100%; overflow:hidden;}
This will prevent window from scrolling in weird ways, like, pressing mouse wheel and moving it, using anchors, etc.
To remove the scroll bar itself (visually), you should also add:
body {overflow: hidden; }
To disable scrolling via pressing arrow keys on keyboard:
window.addEventListener(keydown, function(e) {
// space, page up, page down and arrow keys:
if([32, 33, 34, 37, 38, 39, 40].indexOf(e.keyCode) > -1) {
e.preventDefault();
}
}, false);
