javascript - 当鼠标悬停在具有绝对位置的按钮上时滚动内容（按钮应保持可点击状态）

Question

我试图在鼠标悬停在 div 或按钮上时滚动内容。这很重要，因为如果您无法滚动，就会感觉应用程序被卡住了。但该按钮应保持可点击状态。关于如何实现这一目标的任何想法？

重现步骤

1. 打开示例https://codesandbox.io/s/relaxed-wood-bqhxh?file=/src/App.js
2. 将鼠标悬停在绿色按钮上
3. 用鼠标滚轮滚动

所需行为 您可以滚动容器

实际行为 您无法滚动容器

ps我知道你可以使用pointer-events: none，这样你就可以继续滚动，但这会阻止按钮点击。

标签： javascripthtmlcssreactjs

Answer 1

我可以通过将按钮上的滚轮事件扩展为可滚动 div 上的滚动事件来实现这一点。

签出这支笔： https ://codesandbox.io/s/charming-forest-z8f9b

注意：这可能不是最佳解决方案。但是，它适用于您的情况！