How do I use pointer-events to react only to scroll event?

Question

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'
  });
});

The property originates from the SVG-spec and for HTML-elements it is still very limited (see developer.mozilla.org/en-US/docs/Web/CSS/pointer-events). The only supported values for pointer-events on HTML-elements are none, which makes the element ignore pointer-events completely (though the events may bubble to parent-elements beneath the element), and auto which sets the default behaviour. — tobi
– tobi, Commented Oct 17, 2013 at 9:41
please check if you can use the scroll events of touch devices. w3schools.com/jquerymobile/jquerymobile_events_scroll.asp — raviture
– raviture, Commented Apr 17, 2015 at 12:56

GibboK · Accepted Answer · 2015-04-17 13:05:50Z

1

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.

edited Apr 17, 2015 at 13:05

answered Apr 17, 2015 at 12:51

GibboK

74.3k149 gold badges453 silver badges676 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

SuperUberDuper Over a year ago

oh this is such a shame

trysis Over a year ago

This answers the question as asked, but I, and I am sure the OP, am wondering if there is any other way to accomplish this. Basically, is there any equivalent to "pointer-events: none" that still allows for scrolling? I would also like the scrollbar to be clickable, but I'm not sure about the OP.

Mark Over a year ago

So, is there a way of restricting all mouse events except scrolling?

Vadim Over a year ago

> Events are not being fired, you cannot even scroll the container. -- Except body. Body DOES scroll when pointer-events: none; is applied to it.

Jayemby Over a year ago

you can re-enable pointer-events on child elements, by putting pointer-events:auto; on them, so I thought you'd be able to do the same for scroll bars but I'm struggling to find how to do that

|

Muthu · Accepted Answer · 2023-10-18 07:42:01Z

1

Today I also faced same issue. I want to disable click events but allow scroll.

My Old code:

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

I cannot able to scroll because of pointer-events: none; So I have added overflow to div element and pointer-event to table element. It fixed the scroll problem.

Solution:

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

answered Oct 18, 2023 at 7:42

Muthu

831 silver badge11 bronze badges

Collectives™ on Stack Overflow

How do I use pointer-events to react only to scroll event?

2 Answers 2

7 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Linked

Related