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

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

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

以下是一个示例（在React中）：

如何复制：

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

有没有一种方法可以在不禁用文档级滚动的情况下防止滚动

谢谢

更新：

---

此缺失部分正在向组件添加

tab index=“0'

（我更新了上面的代码）。感谢@Jarvan

您可以筛选不想阻止的事件，例如输入中的箭头事件

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

然后在输入中，将不会阻止光标移动

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

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

更新：

如果您知道要影响哪个组件或区域，只需添加到该区域。如演示代码中所示：

<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>

{
控制台日志（e）；
如果（e.key==“箭头向上”| e.key==“箭头向下”）{
e、 停止传播（）；
e、 预防默认值（）；
控制台日志（e.key）；
返回false；
}
e、 停止传播（）；
}}
>
{result}

您的示例似乎有效，您无法解决的问题是什么？@NarkhedeTushar当您单击div，然后按向下箭头键时，它会滚动div。我想防止这样做我想防止单个组件滚动而不影响其余组件（即允许使用键盘箭头）。除了文档或正文之外，我找不到在任何地方捕获箭头键事件的方法。那么，为什么不将事件添加到单个组件中呢？我删除了文档级别的事件，并将其移动到div级别，效果很好。我尝试将事件侦听器添加到组件中，但不起作用。事件不会在allI丢失时触发tabIndex。真是浪费时间：（谢谢！！！很乐意帮忙：）