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

Question

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

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

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

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

score 12 · Accepted Answer

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

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

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

score 3 · Accepted Answer

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

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

score 0 · Accepted Answer

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

捕捉这些键似乎有一些陷阱，请参阅这个问题以获取一些看起来很有希望的（基于 JQuery 的）示例。

3 回答 3