Css 如何在滚动时添加顶部和底部阴影，但仅在需要时添加？

如何在容器溢出但仅在需要时添加阴影？

我的意思是：

• 如果有可在顶部或底部滚动的内容，则显示阴影以告诉用户有更多内容可滚动
• 如果没有可滚动的内容，则不会出现阴影

并进一步澄清

• 如果容器的内容溢出（即滚动），并且用户位于内容的顶部，则页面底部应该有阴影，而不是顶部
• 如果用户位于页面的底部，那么情况也是一样的，除了顶部应有阴影之外
• 如果内容没有溢出容器，则不应显示阴影以保持干净

我有可用的javascript解决方案，但出于性能原因，我想要一些纯css的解决方案

---

有什么想法吗？

我想你在找这样的东西

参考：

html{
背景：白色；
字体：120%无衬线；
}
.滚动框{
溢出：自动；
宽度：200px；
最大高度：200px；
保证金：50px自动；
背景：/*阴影覆盖*/
线性渐变（白色30%，rgba（255，255，255，0）），线性渐变（rgba（255，255，255，0），白色70%）0 100%，/*阴影*/
径向梯度（50%0，最远侧，rgba（0,0,0,2），rgba（0,0,0,0）），径向梯度（50%100%，最远侧，rgba（0,0,0,2），rgba（0,0,0,0））01100%；
背景：/*阴影覆盖*/
线性渐变（白色30%，rgba（255，255，255，0）），线性渐变（rgba（255，255，255，0），白色70%）0 100%，/*阴影*/
径向梯度（50%0时的最远侧，rgba（0,0,0,2），rgba（0,0,0,0）），径向梯度（50%100时的最远侧，rgba（0,0,0,0,2），rgba（0,0,0,0））0 100%；
背景重复：无重复；
背景色：白色；
背景尺寸：100%40px，100%40px，100%14px，100%14px；
/*Opera在速记方面不支持这一点*/
背景附件：本地，本地，滚动，滚动；
}

我在阴影下展示。现在下去
一,
二,
三,
四,
五,
六,
七,
八,
九,
十,
十一,
十二,
十三,
十四,
十五
十六,
十七,
十八
十九,
二十
结束
这里没有影子。见上文。上升

很抱歉在这里回答了我自己的问题，但在谷歌搜索之后，我找到了一个在macOS上的chrome上运行的好的CSS专用解决方案

@Hash提供了一个取自LeaVerou博客的解决方案。她的解决方案使用了

背景附件：local

来实现这个效果，但是目前在macOS上的chrome 59中已经出现了这种情况

它在2012年起了作用，但至少在2017年对我来说不是这样

---

---

现在，它将在2020年生效，因此您可以查看已接受的答案，而不是此答案 这里有一个纯CSS解决方案，我把阴影放在内容上而不是后面

/*无关紧要的东西*/
html{
字体大小：16px；
}
身体{
保证金：0；
填充：0；
字体：1rem/1.5 arial，无衬线；
}
c.集装箱{
宽度：100%；
最大宽度：400px；
保证金：0自动；
填充：02rem；
框大小：边框框；
}
c-割台{
宽度：100%；
填充：1rem0；
背景：白色；
}
.c-标题{
保证金：0；
字号：2rem；
字体大小：粗体；
}
/*重要的东西*/
.c-滚动框{
位置：相对位置；
宽度：100%；
高度：200px；
溢出：滚动；
}
.c-scrollbox:：之前{
内容：''；
职位：-网络工具包粘性；
位置：粘性；
排名：0；
显示：块；
高度：1px；
背景：rgba（0,0,0,32）；
}
.c-scrollbox:：之后{
内容：''；
位置：绝对位置；
排名：0；
显示：块；
宽度：100%；
高度：1公厘；
背景：线性梯度（rgba（255255,1）0%，rgba（255255,0）100%）；
}

卷轴上的阴影
梅塞纳斯·福西布斯·莫利斯·因特杜姆。在奥古斯·劳里特·鲁图姆·福西布斯·多洛尔·奥克托的带领下，人马过着幸福的生活。Lorem ipsum dolor sit amet，是一位杰出的献身者。Donec ullamcorper nulla non metus拍卖商fringilla。这是一种很好的调味品，是一种很好的调味品。我是奥迪奥先生，我是艾格斯塔·艾格特·奎姆先生

Donec在eget metus为非mi porta孕妇确定了最佳身份。整数是一个完整的数字。塞德·波苏尔·康塞泰特在洛博蒂斯。埃尼安·尤利奥·夸姆。威尼斯人前庭的佩伦茨克ornare sem lacinia quam。这是一个很好的例子。我不知道是谁干的，我不知道是谁干的

猫门前庭舌骨。这是一个很好的例子。埃尼安·尤利奥·夸姆。威尼斯人前庭的佩伦茨克ornare sem lacinia quam。这是一个很好的例子。在奥古斯·劳里特·鲁图姆·福西布斯·多洛尔·奥克托的带领下，人马过着幸福的生活。埃尼安·尤利奥·夸姆。威尼斯人前庭的佩伦茨克ornare sem lacinia quam

埃尼安·尤利奥·夸姆。威尼斯人前庭的佩伦茨克ornare sem lacinia quam。Donec在eget metus为非mi porta孕妇确定了最佳身份。精英自由主义者，法雷特拉·奥古斯。埃尼安·尤利奥·夸姆。威尼斯人前庭的佩伦茨克ornare sem lacinia quam。我是奥迪奥先生，我是艾格斯塔·艾格特·奎姆先生

如果您的用例允许阴影位于内容后面，作为元素背景的一部分，那么接受答案中的CSS唯一解决方案非常有效

如果您的用例要求阴影位于内容之上，或者独立于元素的背景，那么您可能需要使用一些JavaScript。我有这些要求，并构建了一个可以工作的自定义元素

<scroll-shadow>
  <nav>Content…</nav>
</scroll-shadow>