防止焦点 div 使用箭头键滚动

Question

我有一个带有内部滚动条的 div 组件，我想防止向上/向下箭头键在元素获得焦点时滚动（鼠标单击元素），因为它们用于其他事件（例如缩放)。

我找到的唯一解决方案是将事件侦听器附加到文档，但是，它会禁用所有默认箭头键事件，例如在输入字段中移动光标。

这是一个例子（在 React 中）： https://codesandbox.io/s/rsc-live-example-fze6z

如何重现：

• 用鼠标点击内部 div（带有文本）
• 单击向下箭头键-> div 向下滚动

有没有办法防止滚动而不在文档级别禁用它？

谢谢！

更新：

这个缺失的部分是在组件中添加tab-index="0'（我更新了上面的代码）。谢谢@Jarvan

Answer 1

您可以过滤您不想阻止的事件，例如输入中的箭头事件。

if (e.target.tagName.toLowerCase()!=="input" &&(e.key === "ArrowUp" || e.key === "ArrowDown")) {
          e.preventDefault();
}

然后在输入时不会阻止光标移动。

但如果您要保留的事件是同一元素中的某些行为，它将不起作用。

例如您有一些孩子可以集中在“防止向上/向下滚动箭头”div 中，您希望通过使用向上/向下箭头保持在孩子之间移动焦点的能力。在这种情况下，我想您必须实现自定义滚动条，然后您才能完全控制，因为在浏览器行为中我看不到分离单个“滚动”操作的方法。

更新：

如果您知道要影响哪个组件或区域，只需添加到该区域即可。就像在您的演示代码中一样：

<div tabindex="0"
      onKeyDown={e => {
        console.log(e);
        if (e.key === "ArrowUp" || e.key === "ArrowDown") {
          e.stopPropagation();
          e.preventDefault();
          console.log(e.key);
          return false;
        }
        e.stopPropagation();
      }}
    >
      {result}
    </div>