JSFiddle - React, Tailwind, and code Playground

by lid0

HTML

<pre>
  click anywhere to detect scroll target  ( green border dashed)
    - a pointer will be positioned at click point. with "SCROLLABLE / BLOCKED"
    - the blocking item, will opacity will be removed if exists. and set to red color / orange border dashed
</pre>

<div class="cover">
 COVERRRSS
</div>
<div class="container">

<div class="scroll">
   <div class="scroll-content">
        <pre>
      ...

CSS

.container{ 
height:300px;
border:5px solid red;
}
.scroll{
  border:1px solid blue;
  display:block;
  overflow-y:scroll;
  height:100%;
}

.scroll-content {
  display:block;
  height:600px;
}

.pointer {
  top:0px;
  left:0px;
  position:absolute;
  width:100px;
  height:20px;
  border:5px solid yellow;
  background-color:blue;
  box-sizing:inset;
  color:white;
  z-index:1000;
}

.cover{
  border:5px solid green;
  position:absolute;
  top:100px;
  left:100px;
  height:50px;
  width:100px;
  background-color:black;
  z-index:100;
  opacity:30%;
}


.covering {
  border:5px dashed orange;
  opacity:100%;
  display:block;
  background:red;
  z-index:500;
}
.scroll-target {
  border:7px dashed #3fffa5;
  box-sizing: border-box;
}

JavaScript

// Author : lidlanca 2021 March 20
// scroll blocker detector POC

/* temp0.getBoundingClientRect(); */


var pointer = document.getElementById("pointer")
pointer.style.left = "10px"
pointer.right = "20px"



function findElements(x, y) {
  var elms = document.elementsFromPoint(x, y);
  console.log(elms);
  var scrollElement = [];

  var x = [...elms].map((el) => {
    // console.log(el.scrollHeight, "> ", el.clientHeight)

    if (el.scrollHeight > el.clientHeight && ["scroll", "auto"].includes(getComputedStyle(el).overflowY)) {

      if (el.scrollHeight > 0) {
        scrollElement.push(el)
      }

    }

  });

  if (scrollElement.length > 0) {
    scrollElement[0].classList.add("scroll-target")
    checkBlockers(scrollElement[0], elms)
  } else {
    alert("no scroll at this point ")
  }

}

function checkBlockers(scrollElementTarget, elementsAtPoint) {
  var hasCovering = false;
  [...elementsAtPoint].some(function(v) {
    /* scrollElement[0] */
    if (v === scrollElementTarget) {
      // once we reach the target scroll area, we don't care about anything behind it. its containers or other elemtns . so we stop here.
      return true
    }
    if (scrollElementTarget.contains(v)) {
      console.log("INSIDE SCROLL TARGET,", v, " inside of", scrollElementTarget)
    } else {
      hasCovering = true;
      console.log("COVER", v, "covering", scrollElementTarget)
      v.classList.add("covering")
    }

  })
  if (hasCovering) {
    pointer.innerText = "BLOCKED"
  } else {
    pointer.innerText = "SCROLLABLE"
  }

}


document.body.addEventListener('click', function(evt) {
  findElements(evt.clientX, evt.clientY)
  pointer.style.left = evt.clientX + "px"
  pointer.style.top = evt.clientY + "px"

}, true)