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

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

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

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

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

来源

2010-01-07 Chavdar

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

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

您可以轻松地扩展上工作，只有当你的菜单是积极的，但没有看到它的一些代码，这是不可能给你一个例子。

来源

2010-01-07 13:06:18

大肚嗨，谢谢您的回答！有效！乍一看，我认为它会阻止箭头键（甚至我的菜单），但我使用onkeyup事件的菜单。因此，一切都可以现在...我只需要调整它的IE也:) 感谢Pekka！一切顺利。 ps：我不敢相信我花了多少时间找到解决方案，最后它是如此简单:) – Chavdar 2010-01-07 13:25:09

@Chavdar，不要忘记标记接受的答案，以便其他人不必再打扰了。而且你知道，你可以将你的菜单中的事件与这个结合起来，使事情变得更简单（在菜单中做你的东西，如果键是箭头等则返回false，但这需要绑定onkeydown事件）。 – 2010-01-07 13:38:41

谢谢Tatu，答案现在已标记。 – Chavdar 2010-01-07 14:10:42

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

似乎有一些捕捉这些键的问题，请参阅this question了解很多基于JQuery的示例，这些示例看起来很有希望。

来源

2010-01-07 13:07:28

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

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

来源

2012-08-23 09:45:23 Vidyadhar

这个答案实际上解决了所有浏览器中的问题，并且没有明确禁用任何事件。接受的答案（keydown）像我的大锤一样工作，并在所有输入控件中完全禁用箭头。 – 2014-08-13 13:52:56

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

回答

相关问题