内容滚动修复下方的插入框阴影

Question

我发现这个解决方案Inset box-shadow beneath content 工作得很好，但是当外部容器 div 必须滚动（溢出）时，具有 box-shadow 的内部 div 将随着内容滚动。如何解决这个问题？

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>

Answer 1

您可以考虑添加叠加层并使用z-index 指定哪个块位于顶部以将阴影置于内容之上或之下。

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>