javascript - 如何使用箭头键禁用 FF 中的页面滚动

Question

我正在构建一个包含主题和项目的菜单。每个主题都可以通过单击展开和折叠。我的任务是使使用向上和向下箭头键在菜单主题和项目中移动成为可能。我已经这样做了，但问题是当页面大于窗口时，按箭头键时页面正在滚动。我试过使用:

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

停止页面滚动。因此，当我点击“主题 2”时，我可以继续使用箭头键转到下一个主题/项目。之后，如果我点击屏幕上的其他任何地方，我会将溢出设置回自动，页面可以再次滚动。

这在 IE 中有效，但在 FF 中无效。在 FF 中，滚动条被删除，鼠标滚轮不会滚动页面，但箭头键仍然可以。所以我的问题是如何解决这个问题， 或者更好的是，当焦点位于任何菜单元素上时如何不滚动页面？因此我不会使用溢出属性。

Answer 1

您必须将 keydown 事件绑定(bind)到文档，如果事件键码与任何箭头键(37 到 40)匹配，则返回 false。这样箭头按下就不会再继续了。

document.onkeydown = function(e) {
    var k = e.keyCode;
    if(k >= 37 && k <= 40) {
        return false;
    }
}

您可以轻松地将其扩展为仅在您的菜单处于事件状态时才起作用，但如果没有看到其中的一些代码，就不可能给您举个例子。