vant遮罩层 不能滚动_使用纯 CSS 实现滚动阴影效果

失踪人口回归，终于记起自己还有一个公众号，新的一年，给自己立个 Flag，坚持更新。原创为主，CSS 为主，不要错过。
开门见山，有这样一种非常常见的情况，对于一些可滚动的元素而言。通常在滚动的时候会给垂直于滚动的一侧添加一个阴影，用于表明当前有元素被滚动给该滚出了可视区域，类似这样：

可以看到，在滚动的过程中，会出现一条阴影：

对于两侧的列在滚动的过程中，静止不动，吸附在边界的问题，通常 CSS 使用 position: sticky 即可解决。

但是对于滚动过程中才出现的阴影(滚动容器内的内容没有贴边，则阴影出现，贴边，则阴影消失)，之前的做法一直都是需要借助 JS 完成的。

那么，有没有纯 CSS 能够实现的方案呢？嘿嘿嘿，有。有一种非常讨巧的障眼法，下面就让我们来一步一步揭开它的面纱。

神奇的 background-attachment

要使用纯 CSS 实现上述滚动阴影，最核心的要使用到的元素就是 background-attachment。

在较早的一篇文章里 -- CSS 实现视差效果，详细了介绍了 background-attachment，借助了 background-attachment: fixed 可以简单的实现网站的滚动视差或者是类似图片点击的水纹效果，类似这样：

当然，今天我们的主角不是 background-attachment: fixed，而是 background-attachment: srcoll。

b