在内容滚动修复下方插入框阴影 [英] Inset box-shadow beneath content scroll fix

问题描述

我找到了此解决方案在内容下方插入框形阴影，效果很好，但是当外部容器div必须滚动(溢出)时，具有框阴影的内部div将随内容滚动.该如何解决?

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>

推荐答案

您可以考虑添加叠加层，并使用z-index指定顶部的哪个块将阴影放在内容上方或下方.

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>

这篇关于在内容滚动修复下方插入框阴影的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！