javascript - 在可滚动区域内但在内部 div 之上创建嵌入阴影

Question

我有一个 paper-dialog-scrollable当向下滚动页面时，我希望其中的阴影出现在顶部。

但是，如果我设置 inset框阴影，任何内部 div即使在玩过 z-index 之后，我们也可以简单地越过它的顶部.

有人能帮帮我吗？请看这个Fiddle播放/编辑。

目的是在内容未滚动时没有阴影，然后在滚动时淡入。

Answer 1

您需要再创建一个类 boxShadow 以在滚动 div 上定义 box-shadow。

.container {
  width: 400px;
  height: 200px;
  background: #e5e5e5;
  overflow: auto;
}
.content {
  text-align: center;
  width: 200px;
  height: 300px;
  background: lightblue;
  margin: auto;
  margin-top: 20px;
  margin-bottom: 20px;
  padding: 10px;
  z-index:-1;
}
.boxShadow{box-shadow: inset 0 10px 10px -1px rgba(0,0,0,0.6); width:400px; height:20px; background:#e5e5e5;}

<div class="boxShadow"></div>
<div class="container">
    <div class="content">
        Some text
    </div>
</div>