如何使用指针事件仅对滚动事件做出反应? [英] How do I use pointer-events to react only to scroll event?

问题描述

是否可以将指针事件设置为仅对触摸板上的滚动或拖动做出反应?我有一个 div 'in the way' 用于滚动复杂的 html 排列*，我想知道是否可以将指针事件限制为仅对滚动/鼠标滚轮动作做出反应.

我很想知道我是否正确理解了这一点.如果 pointer-events:none; 意味着所有事件都是无效的，我如何杀死所有事件但保留一个活动?

我设置的 HTML 区域比它适合的框大，但是如果我要显示滚动条，它看起来会比它应有的高，因为有一个弹出 (position:top) 元素.该区域仍然需要滚动，因此为了实现这一点，我使用 jQuery 使我的滚动框"跟随 div 中的一个不可见 div:

<div id="scrollcontrol"style="overflow-y:auto;overflow-x:hidden;position:absolute;顶部:12 像素；左侧:180 像素；宽度:40 像素；高度:1300 像素；"><div id="catscrollpos"style="position:absolute;顶部:0px;宽度:200px;高度:2250px;">

脚本

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

解决方案

至于 文档:

当一个元素应用了 pointer-events: none;

该元素从不任何鼠标事件的目标并且任何事件都是无效的；

请看这个演示:

http://jsbin.com/wewosumehi/1/

事件没有被触发，你甚至不能滚动container.

Is it possible to set pointer-events to only react to scrolling or drag on a touch-pad? I have a div 'in the way' for scrolling a complex html arrangement* and I would like to know if I can limit the pointer events to only react to scroll / mouse wheel actions.

I am interested in knowing whether I understand this correctly. If pointer-events:none; means that all events are void, how can I kill all events but leave one active?

I have set up an HTML area that is bigger than the box it fits in, but if I were to show the scroll bar, it would seem higher than it should be because of a pop-up (position:top) element. This area still needs to be scrolled so to achieve this I have used jQuery to make my 'box to scroll' follow an invisible div within a 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>

Script

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

解决方案

As for specification in the docs:

When an element has applied pointer-events: none;

The element is never the target of any mouse events and any events are void;

Please look at this demonstration:

http://jsbin.com/wewosumehi/1/

Events are not being fired, you cannot even scroll the container.

这篇关于如何使用指针事件仅对滚动事件做出反应?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！