我有一个 paper-dialog-scrollable
当向下滚动页面时,我希望其中的阴影出现在顶部。
但是,如果我设置 inset
框阴影,任何内部 div
即使在玩过 z-index
之后,我们也可以简单地越过它的顶部.
有人能帮帮我吗?请看这个Fiddle播放/编辑。
目的是在内容未滚动时没有阴影,然后在滚动时淡入。
最佳答案
您需要再创建一个类 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>
关于javascript - 在可滚动区域内但在内部 div 之上创建嵌入阴影,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45214538/