css 如何使用指针事件来只对滚动事件做出React？

jutyujz0 于 2023-10-21 发布在 React

关注(0)|答案(2)|浏览(138)

有没有可能设置指针事件只对触摸板上的滚动或拖动做出React？我有一个div '在路上'滚动一个复杂的html安排 *，我想知道我是否可以限制指针事件，只对滚动/鼠标滚轮动作作出React。
我想知道我是否正确地理解了这一点。如果pointer-events:none;意味着所有事件都是无效的，我如何杀死所有事件，但保留一个活动事件？
我已经设置了一个HTML区域，它比它所在的框大，但是如果我要显示滚动条，它看起来会比它应该的高，因为有一个弹出（位置：顶部）元素。这个区域仍然需要滚动，所以为了实现这一点，我使用jQuery使我的'滚动框'跟随div中的一个不可见的div：

<div id="scrollcontrol"style="overflow-y:auto;overflow-x:hidden;position:absolute;
   top:12px;left:180px;width:40px;height:1300px;">
   <div id="catscrollpos"style="position:absolute;
    top:0px;width:200px;height:2250px;">
   </div>
</div>

脚本

$('#scrollcontrol').scroll(function({
  $('#rangetable').css({
  'top':$('#catscrollpos').position().top+'px'
  });
});

css

来源：https://stackoverflow.com/questions/16877880/how-do-i-use-pointer-events-to-react-only-to-scroll-event

2条答案

按热度按时间

jhkqcmku1#

关于docs中的规格：
当一个元素应用了pointer-events: none;
元素never是any鼠标事件的目标，任何事件都是void;
请看这个演示：
http://jsbin.com/wewosumehi/1/
事件没有被触发，你甚至不能滚动container。

赞(0）回复(0）举报 2023-10-21

svmlkihl2#

今天我也面临同样的问题。我想禁用单击事件但允许滚动。
旧代码：

<div style="width: 100%; height: 540px; overflow: auto; pointer-events: none;">
<table></table>
</div>

我无法滚动，因为指针事件：所以我给div元素添加了overflow，给table元素添加了pointer-event。它解决了卷轴的问题。
解决方案：

<div style="width: 100%; height: 540px; overflow: auto">
<table style="pointer-events: none;"></table>
</div>

赞(0）回复(0）举报 2023-10-21

我来回答

css 如何使用指针事件来只对滚动事件做出React？

2条答案

相关问题

热门标签

最新问答