完全禁用网页滚动

时间:2013-05-19 16:47:18

标签: javascript html css

我想禁用我的网页滚动,但完全不是禁用滚动条

overflow: hidden

无效。

由于边缘上的“软滚动”,此解决方法也不适用于Mac。它将显示一个可怕的摇晃动画:

window.onscroll = function () {
window.scrollTo(0,0);
}

还有其他方法可以完全禁用滚动吗?

1 个答案:

答案 0 :(得分:39)

假设简化的HTML代码是:

<html><body><div class=wrap>content...</div></body></html>

将body,html设置为height:100%;

body, html {height:100%;}

将div置于体内,并将其设置为伸展到所有身高:

div.wrap {height:100%; overflow:hidden;}

这将阻止窗口以奇怪的方式滚动,例如,按下鼠标滚轮并移动它,使用锚点等。

要删除滚动条本身(直观地),您还应添加:

body {overflow: hidden; }

要通过按键盘上的箭头键禁用滚动:

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);