how to make background content scrollable with CSS when Masked on the foreground-CodePudding

I want to be able to scroll through the bg content, even when I have the overlay opened. How can I also make the background content scrollable? I've also checked other places where there are similar questions raised, but hasn't helped me for this particular instance.

CSS:

.main{
  position: relative;
}
.masked-content {
  height: 150px;
  overflow: auto;
 
}
.mask {
   background-color: rgba(255, 255, 255, 0.7);
  position: absolute;
    top: 0px;
    left: 0;
    width: 100%;
    cursor: default;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    }

JS:

<div >
  <div >This is some text covered by the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the mask</div>

  <div>
    <div >Some contents above the mask</div>
  </div>
</div>

Fiddle:

https://jsfiddle.net/43w7xzL0/

any ideas?

CodePudding user response：

Set pointer-events: none on the mask to let the scroll events through to the element(s) behind.

.mask {
  pointer-events: none;
  background-color: rgba(255, 255, 255, 0.7);
  position: absolute;
  ...
}

https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events

CodePudding user response：

I think that is more easy if you do it using js. Just add This script to your code.

<script>
  const mask = document.querySelector('.mask');
  const maskContent = document.querySelector('.masked-content');
  mask.addEventListener('mouseover', (e)=> {
    e.target.style.display='none';
  });
  maskContent.addEventListener('mouseleave', (e)=> {
    mask.style.display='flex';
  });
</script>