完全禁用网页滚动 [英] Completely disable scrolling of webpage
问题描述
我想停用网页滚动功能，但完全不是停用滚动条，所以
I want to disable scrolling for my webpage, but completely, not just disable scrollbars so
overflow: hidden
将无法使用。
此解决方法不会由于边缘的软滚动，适用于Mac电脑。它会显示一个可怕的摇摇欲坠的动画：
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?
推荐答案
假设简化的HTML代码是：
Presuming the simplified HTML code is:
<html><body><div class=wrap>content...</div></body></html>
将body和html设置为height：100％;
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:
这会阻止窗口以奇怪的方式滚动，例如按下鼠标滚轮和移动它，使用锚点等。
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);
这篇关于完全禁用网页滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
