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

Question

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

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

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

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

Answer 1

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

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

您可以轻松地扩展它，使其仅在菜单处于活动状态时才起作用，但是如果没有看到其中的一些代码，就不可能给您提供示例。

Answer 2

下面的代码已经解决了问题

$(window).scroll(function () { 
  window.scrollTo(0,0);
});

Answer 3

我能看到的唯一方法是拦截 keydown 事件并自己进行模糊/聚焦。

捕获这些按键似乎存在一些问题，请参阅这个问题< /a> 一些看起来很有前途的（基于 JQuery 的）示例。