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>

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

1 个答案: