Question

好吧......我可能是一个懒惰的人，但我觉得有点烦人

当我搜索“如何防止向下滚动”时，“如何设置向下滚动事件”。

在我的javascript代码中，我为向下箭头键设置了事件。当我按下箭头

从浏览器

，浏览器不仅会设置我设置的事件，还会执行

向下滚动页面，这不是我想要的。所以这是我的问题。

如何禁用向下按箭头时出现的向下滚动功能？

任何帮助将不胜感激。

Answer 1

如果您想阻止垂直滚动条和用户的任何垂直滚动操作，您可以使用此javascript：

document.body.style.overflowY = "hidden";

或者，也可以使用CSS规则设置：

body {overflow-y: hidden;}

另一方面，如果您要处理的是在处理向下数组后阻止向下箭头的默认键处理程序执行任何操作，那么您需要像这样调用e.preventDefault()：

function myKeyDownHandler(e) {
    // your code here
    e = e || window.event;
    if (e.preventDefault) {
        e.preventDefault();
    } else {
        e.returnValue = false;   // older versions of IE (yuck)
    }
    return false;
}

如果您需要在多个地方执行此操作，则更简洁的方法是为此创建自己的跨浏览器功能：

function preventDefault(e) {
    e = e || window.event;
    if (e.preventDefault) {
        e.preventDefault();
    } else {
        e.returnValue = false;   // older versions of IE (yuck)
    }
}

function myKeyDownHandler(e) {
    // your code here
    preventDefault(e);
    return false;
}

这是一个完美的例子，其中跨浏览器框架（jQuery / YUI / etc）可以节省您的时间，因为他们已经为您完成了所有这些跨浏览器工作。

这是preventDefault和stopPropagation()上的interesting article。

Answer 2

以下是一个不允许使用箭头键滚动的示例页面：

<script>
document.onkeydown = function(evt) {
    evt = evt || window.event;
    var keyCode = evt.keyCode;
    if (keyCode >= 37 && keyCode <= 40) {
        return false;
    }
};
</script>
<body style="height:3000px;">

</body>

我如何防止在JavaScript中向下滚动？

2 个答案: