Inset box-shadow beneath content scroll fix

问题

I found this solution Inset box-shadow beneath content which works just fine, but when the outer container div has to be scrolling (overflow), the inner div which has the box-shadow will scroll with the content. How to fix this?

div {
    height:300px;
    color:red;
    position:relative;
}

div div {
    box-shadow:inset 0 0 10px black;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

<div>
    <div></div>
    a
</div>

回答1:

you can consider adding an overlay and use z-index to specify which block is on top to put the shadow over or under the content.

div {
    height:300px;
    color:red;
    position:relative;
}

div div {
    padding: 10px;
    position:absolute;
    top:0;
    left:0;
    width:95%;
    height:100%;
    overflow: scroll;
    background: none;
    z-index: 99;
}

#overlay{
  display: block;
  width: 95%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  box-shadow: inset 0 0 200px black;
  z-index: 1;
}

<div>
    
    <div>
      lorem ipsum dolor <br />
      lorem ipsum dolor <br />
      lorem ipsum dolor <br />
      lorem ipsum dolor <br />
      lorem ipsum dolor <br />
      lorem ipsum dolor <br />
      lorem ipsum dolor <br />
      lorem ipsum dolor <br />
      lorem ipsum dolor <br />
      lorem ipsum dolor <br />
      lorem ipsum dolor <br />
      lorem ipsum dolor <br />
    </div>   
    <span id="overlay"></span>
</div>

来源：https://stackoverflow.com/questions/49652744/inset-box-shadow-beneath-content-scroll-fix