CODEWITHSUNDEEP
javascripthtmlcss
user1234
user1234

Reputation: 3159

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

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?

Upvotes: 8

Views: 11197

Answers (1)

first
first

Reputation: 733

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>

Upvotes: 2

Related Questions