CSS怎么实现滚动阴影效果-创新互联

这篇文章主要为大家展示了CSS怎么实现滚动阴影效果，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带大家一起来研究并学习一下“CSS怎么实现滚动阴影效果”这篇文章吧。

10年的和平网站建设经验，针对设计、前端、开发、售后、文案、推广等六对一服务，响应快，48小时及时工作处理。成都全网营销推广的优势是能够根据用户设备显示端的尺寸不同，自动调整和平建站的显示方式，使网站能够适用不同显示终端，在浏览器中调整网站的宽度，无论在任何一种浏览器上浏览网站，都能展现优雅布局与设计，从而大程度地提升浏览体验。创新互联从事“和平网站设计”,“和平网站推广”以来，每个客户项目都认真落实执行。

css是什么意思

css是一种用来表现HTML或XML等文件样式的计算机语言，主要是用来设计网页的样式，使网页更加美化。它也是一种定义样式结构如字体、颜色、位置等的语言，并且css样式可以直接存储于HTML网页或者单独的样式单文件中，而样式规则的优先级由css根据这个层次结构决定，从而实现级联效果，发展至今，css不仅能装饰网页，也可以配合各种脚本对于网页进行格式化。

开门见山，有这样一种非常常见的情况，对于一些可滚动的元素而言。通常在滚动的时候会给垂直于滚动的一侧添加一个阴影，用于表明当前有元素被滚动给该滚出了可视区域，类似这样：

CSS怎么实现滚动阴影效果

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

CSS怎么实现滚动阴影效果

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

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

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

神奇的`background-attachment`

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

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

CSS怎么实现滚动阴影效果

当然，今天我们的主角不是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，这个就是和我们日常使用中的用法是一致的，可滚动容器的背景图案随着容器进行滚动：

CSS怎么实现滚动阴影效果

background-attachment: scroll，这个是今天的主角，它表明背景相对于元素本身固定，而不是随着它的内容滚动：

CSS怎么实现滚动阴影效果

如果你还没弄明白他们的区别，可以戳下面的 DEMO 自己感受一下：

Demo地址：https://codepen.io/Chokcoco/pen/xJJorg

`srcoll` 与`local` 同时使用，实现障眼法

到这里，可能很多同学还是懵的，我们到底要做什么呢？这个和本文的滚动阴影有什么关联呢？

别急，滚动阴影的难点在于，初始没有滚动的时候是没有阴影展现的，只有当开始滚动，阴影才会出现。

所以这里，我们借助background-attachment: srcoll 和background-attachment: local 两个属性，在滚动初始的时候，利用两层背景叠加在一起隐藏阴影背景，真正滚动的时候，将叠加的部分移走，只漏出阴影部分即可。

嗯？什么意思。我们用给滚动容器，加上两个渐变效果，分别运用上background-attachment: srcoll 和background-attachment: local，再叠加起来，像是这样：



    ...
    ...
    ...

// 情形一：
.g-one {
    background: linear-gradient(#fff, #f00);
    background-size: 100% 10px;
    background-repeat: no-repeat;
    background-attachment: local;
}

// 情形二：
.g-two {
    background: radial-gradient(at 50% 0, #000, #0f0 70%);
    background-size: 100% 10px;
    background-repeat: no-repeat;
    background-attachment: scroll;
}

// 情形三：
.g-combine {
    background: 
        linear-gradient(#fff, #f00),
        radial-gradient(at 50% 0%, #000, #0f0 70%);
    background-size: 100% 10px, 100% 10px;
    background-repeat: no-repeat;
    background-attachment: local, scroll;
}

实际效果就是这样，一个背景是随容器滚动，一个背景是随容器固定。随容器滚动的背景充当初始的遮罩层：

CSS怎么实现滚动阴影效果

OK，可以看大，当滚动的时候，最后一幅叠加的情况，其实就是我们需要的滚动的时候展示不同的颜色（阴影）的效果。我们调整一下两个渐变的颜色，遮罩层（background-attachment: local）为白色，再把固定不动的阴影层（background-attachment: scroll），利用径向渐变模拟为我们想要的阴影颜色。

CSS 代码大概是这样：

.g-final {
    background: 
        linear-gradient(#fff, transparent 100%),
        linear-gradient(rgba(0, 0, 0, .5), transparent 100%);
    background-size: 100% 30px, 100% 10px;
    background-repeat: no-repeat;
    background-attachment: local, scroll;
}

利用linear-gradient(rgba(0, 0, 0, .5), transparent 100%) 线性渐变模拟了一层灰色阴影：

CSS怎么实现滚动阴影效果