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

Question

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

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

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

如何复制：

• 用鼠标点击内部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>