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

Posted 2023-02-22

【中文标题】防止焦点 div 使用箭头键滚动

【英文标题】：Prevent focused div from scrolling with arrow keys

【发布时间】：2020-02-20 09:07:34

【问题描述】：

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

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

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

如何重现：

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

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

谢谢！

更新：

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

【问题讨论】：

您的示例似乎有效，您无法解决什么问题？

@NarkhedeTushar 当你点击 div 然后向下箭头键它滚动 div。我想防止这种情况发生

【参考方案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>

【讨论】：

我想防止单个组件滚动而不影响其余组件（即允许使用键盘箭头）。除了文档或正文之外，我找不到在任何地方捕获箭头键事件的方法。

那你为什么不给单个组件添加事件呢？我删除了您的文档级别事件并将其移至 div 级别，它工作正常。

我尝试将事件监听器添加到组件，但它不起作用。该事件根本没有触发

我错过了 tabIndex。真是浪费时间:(谢谢！！！

很高兴为您提供帮助:)