如何禁止使用箭头键滚动页面，但允许使用鼠标滚轮滚动页面？

Question

由于我正在使用jQuery，因此任何通过jQuery实现的解决方案都可以。理想情况下，我都想知道。

我已经将箭头键绑定到我的页面上的另一个函数（使用jQuery），但除了导致问题之外，它们还会导致页面滚动。

我可能曾经知道这个，但我不记得了。

- Daddy Warbox

---

阻止键盘按键滚动活动框架是非常糟糕的UI设计。我（以及许多其他人）大多数情况下使用键盘浏览，但在偶尔出现阻止正确键盘导航的页面上不得不使用鼠标非常令人沮丧。当然，可能有合理的原因来这样做，但您应该确保您的原因是其中之一。 - Andy E

可以的。我的网络应用程序是一个编辑器，而不是正式的网页。 - Daddy Warbox

我完全同意，总是阻止浏览器的标准行为是不良的 UI 设计。但在某些情况下，这样做是完全可以接受的（在我看来）。在我的情况下，我需要通过这种方式来防止页面在用户在列表中切换选项时滚动。当焦点在列表之外时，页面将正常滚动；而当焦点在列表内时，页面会避免滚动，除非需要显示所选项目。 - Adrian Schmidt

Answer 1

添加文档级别的按键处理程序即可解决问题！

var ar=new Array(33,34,35,36,37,38,39,40);

$(document).keydown(function(e) {
     var key = e.which;
      //console.log(key);
      //if(key==35 || key == 36 || key == 37 || key == 39)
      if($.inArray(key,ar) > -1) {
          e.preventDefault();
          return false;
      }
      return true;
});

- TheVillageIdiot

---

它处理 PgUp（33）、PgDn（34）、End（35）、Home（36）、Left（37）、Up（38）、Right（39）、Down（40)。 - TheVillageIdiot

你应该使用一个非匿名函数，并将该函数绑定到keyPress事件上。这样，当按钮被连续按下时，滚动就会停止。 - Yo-L

关键是使用 onkeydown，而不是 onkeyup，并且还要使用 e.preventDefault。 - user1187135

在那里，您可以使用[ ... ].indexOf(key) != -1和addEventListener来消除对jquery的需求。 - srcspider

补充@srcspider所说的：或者更习惯用语地说，ar = new Set([...])和ar.has(key)。 - Tim Čas

Answer 2

在某些情况下，例如当您实际上没有要聚焦的元素，只是必须单击的某个区域时，您可能无法对处理程序进行太多控制，并且在全局级别防止事件可能会有点不稳定（正如我艰难地发现的那样）。

在这些情况下，最简单的解决方案是绑定控件按钮的单击事件并将焦点放在一个空输入元素上，该元素位于左侧-9000px处。

然后，您可以通过keydown可靠地阻止事件，也不必担心阻止默认行为或其他全局侦听器，因为输入元素上的默认行为只会将光标向左和向右移动。

- srcspider

Answer 3

如果您添加文档级别的按键处理程序，则会在任何时候阻止页面的正常滚动，而不仅仅是当您的元素具有焦点时，这可能是一种不希望的效果。

- JVitela