开门见山，有这样一种非常常见的情况，对于一些可滚动的元素而言。通常在滚动的时候会给垂直于滚动的一侧添加一个阴影，用于表明当前有元素被滚动给该滚出了可视区域，类似这样：
可以看到，在滚动的过程中，会出现一条阴影：
对于两侧的列在滚动的过程中，静止不动，吸附在边界的问题，通常 CSS 使用 position: sticky 即可解决。
但是对于滚动过程中才出现的阴影（滚动容器内的内容没有贴边，则阴影出现，贴边，则阴影消失），之前的做法一直都是需要借助 JS 完成的。
那么，有没有纯 CSS 能够实现的方案呢？嘿嘿嘿，有。有一种非常讨巧的障眼法，下面就让我们来一步一步揭开它的面纱。
神奇的 background-attachment
要使用纯 CSS 实现上述滚动阴影，最核心的要使用到的元素就是 background-attachment。
在较早的一篇文章里 -- CSS 实现视差效果，详细了介绍了 background-attachment，借助了 background-attachment: fixed 可以简单的实现网站的滚动视差或者是类似图片点击的水纹效果，类似这样：
当然，今天我们的主角不是 background-attachment: fixed，而是 background-attachment: srcoll。
background-attachment: srcoll
首先，介绍一下 background-attachment，如果指定了 background-image ，那么 background-attachment 决定背景是在视口中固定的还是随着包含它的区块滚动的。
简单而言，就是决定了在可滚动的容器中，背景图案是如何进行运动的。通过两个简单的 Demo，弄懂 background-attachment: srcoll 和 background-attachment: local。
background-attachment: local，这个就是和我们日常使用中的用法是一致的，可滚动容器的背景图案随着容器进行滚动：
background-attachment: scroll，这个是今天的主角，它表明背景相对于元素本身固定， 而不是随着它的内容滚动：
如果你还没弄明白他们的区别，可以戳下面的 DEMO 自己感受一下：
CodePen Demo -- bg-attachment Demo
srcoll 与 local 同时使用，实现障眼法
到这里，可能很多同学还是懵的，我们到底要做什么呢？这个和本文的滚动阴影有什么关联呢？
别急，滚动阴影的难点在于，初始没有滚动的时候是没有阴影展现的，只有当开始滚动，阴影才会出现。
所以这里，我们借助 background-attachment: srcoll 和 background-attachment: local 两个属性，在滚动初始的时候，利用两层背景叠加在一起隐藏阴影背景，真正滚动的时候，将叠加的部分移走，只漏出阴影部分即可。
嗯？什么意思。我们用给滚动容器，加上两个渐变效果，分别运用上 background-attachment: srcoll 和 background-attachment: local，再叠加起来，像是这样：
<!-- 可滚动容器 --> <ul> <li>...</li> ... <li>...</li> </ul>