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

Question

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

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

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

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

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事件并自行模糊/集中注意力。

似乎有一些问题需要抓住这些密钥，请参阅this question了解一些看起来非常有前景的基于JQuery的示例。