pointer-events: none allow scroll but disable click-JS/CSS

Question

Is there a way where setting pointer-events: none can only disable the click on that container but have scroll enable on the same with an overlay.

I have fiddle: https://jsfiddle.net/1eu6d3sq/1/

When I mask, using pointer-events: none, the entire container disables and when I remove this property- all events get enabled. css:

   .parent {
  position: relative;
  pointer-events: none; /* if I remove this the scrolling works and click is also enabled. if I add this, scrolling and click both get disabled */
}
    
.button {cursor: pointer}
.main {    
  height: 80px;
  overflow: auto;
}
    
.mask {
  z-index: 1000;
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  cursor: default;
  height: 100%;
}

HTML:

 <div class="parent"><div class="main">

      <div class="aaaa">
      Some masked contentThis is some text covered by the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome ontents above the maskSome ontents above the maskSome ontents above the maskSome ontents aboveThis is some text covered by the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome ontents above the maskSome ontents above the maskSome ontents above the maskSome ontents aboveThis is some text covered by the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome ontents above the maskSome ontents above the maskSome ontents above the maskSome ontents above
      </div>
      <div>This is some text covered by the mask</div>
      <div>
      <span onclick="function hi(){alert('Hi!')};hi()">clicked SAPN</span>
      </div>
      <button class="button">
         <span class="span-button">OK</span>
      </button>
      <div class="mask" style="background-color: rgba(255, 255, 255, 0.7);">
        <div>
            <div>
              Some contents above the mask
            </div>
        </div>
      </div>
</div>
</div>

If I understand pointer-events property correctly, it will disable all events triggered. Here I have added pointer-events to my parent/root element and all subsequent elements inside that parent gets disabled. however how can I make the parent/root DOM element listen only to scroll element?

I tried:

window.addEventListener("scroll", this.onBodyScroll, true);

but onBodyScroll function never gets triggered.

any ideas?

The only scrollable content I can see in your fiddle is the .aaaa element, not the document - is that what you meant? — Rory McCrossan
– Rory McCrossan, Commented Oct 7, 2022 at 19:34
@Rory McCrossan: Sorry Yes, I meant the root container. I updated my desc — user1234
– user1234, Commented Oct 7, 2022 at 19:40

first · Accepted Answer · 2022-10-07 21:25:29Z

According to MDN documentation on pointer-events

Note that preventing an element from being the target of pointer events by using pointer-events does not necessarily mean that pointer event listeners on that element cannot or will not be triggered. If one of the element's children has pointer-events explicitly set to allow that child to be the target of pointer events, then any events targeting that child will pass through the parent as the event travels along the parent chain, and trigger event listeners on the parent as appropriate. Of course any pointer activity at a point on the screen that is covered by the parent but not by the child will not be caught by either the child or the parent (it will go "through" the parent and target whatever is underneath).

Keeping this in mind, re-setting pointer-events on your overflow container should enable scrolling while all other events disabled. (Forgetting mask)

.main {
  position: relative;
  /* if I remove this the scrolling works and click is also enabled. if I add this, scrolling and click both get disabled */
  pointer-events: none;
}

.button {
  cursor: pointer
}

.aaaa {
  height: 80px;
  overflow: auto;
  pointer-events: auto;
}


/* .mask {
  z-index: 1000;
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  cursor: default;
  height: 100%;
} */

<div class="main">
  <div class="aaaa">
    Some masked contentThis is some text covered by the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome ontents above the maskSome ontents above the maskSome ontents above the maskSome
    ontents aboveThis is some text covered by the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome ontents above the maskSome ontents above the maskSome ontents above the maskSome
    ontents aboveThis is some text covered by the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome ontents above the maskSome ontents above the maskSome ontents above the maskSome
    ontents above
  </div>
  <div>This is some text covered by the mask</div>
  <div>
    <span onclick="function hi(){alert('Hi!')};hi()">clicked SAPN</span>
  </div>
  <button class="button">
           <span class="span-button">OK</span>
        </button>
  <!-- <div class="mask" style="background-color: rgba(255, 255, 255, 0.7);">
          <div>
              <div>
                Some contents above the mask
              </div>
          </div>
        </div> -->
</div>

Now if you want to mask, you don't really have to set any pointer-events. It should work as intended(click disabled and scroll enabled).

.main {
  position: relative;
  /* if I remove this the scrolling works and click is also enabled. if I add this, scrolling and click both get disabled */
  pointer-events: none;
}

.button {
  cursor: pointer
}

.aaaa {
  height: 80px;
  overflow: auto;
  pointer-events: auto;
}

.mask {
  z-index: 1000;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  cursor: default;
  height: 100%;
}

<div class="main">
  <div class="aaaa">
    Some masked contentThis is some text covered by the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome ontents above the maskSome ontents above the maskSome ontents above the maskSome
    ontents aboveThis is some text covered by the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome ontents above the maskSome ontents above the maskSome ontents above the maskSome
    ontents aboveThis is some text covered by the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome ontents above the maskSome ontents above the maskSome ontents above the maskSome
    ontents above
  </div>
  <div>This is some text covered by the mask</div>
  <div>
    <span onclick="function hi(){alert('Hi!')};hi()">clicked SAPN</span>
  </div>
  <button class="button">
            <span class="span-button">OK</span>
        </button>
  <div class="mask" style="background-color: rgba(255, 255, 255, 0.7);">
    <div>
      <div>
        Some contents above the mask
      </div>
    </div>
  </div>
</div>

hi @first, thanks for the detailed descp- I tried here in jsfiddle.net/1eu6d3sq/2. all my content is inside a container masked entirely- the pointer-events: auto makes <span> clickable. what im i missing? sorry if I missed explaining rightly before
As now all your content is residing inside the overflow container and you want to scroll it anyway, so applying pointer-events on it doesn't matter. All you can do is remove all the pointer-events from your styles and do .main * {pointer-events: none;} so any child element with trigger events is disabled (and you can always enable it back for any specific element with pointer-events: auto i.e. for OK button .span-button {pointer-events: auto;}). Hope this helps.

Collectives™ on Stack Overflow

pointer-events: none allow scroll but disable click-JS/CSS

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related