使用纯 CSS 实现滚动阴影效果
开门见山,有这样一种非常常见的情况,对于一些可滚动的元素而言。通常在滚动的时候会给垂直于滚动的一侧添加一个阴影,用于表明当前有元素被滚动给该滚出了可视区域,类似这样:
可以看到,在滚动的过程中,会出现一条阴影:
对于两侧的列在滚动的过程中,静止不动,吸附在边界的问题,通常 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
,再叠加起来,像是这样:
1 2 3 4 5 6 | <!-- 可滚动容器 --> < ul > < li >...</ li > ... < li >...</ li > </ ul > |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | // 情形一: .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 ; } |
实际效果就是这样,一个背景是随容器滚动,一个背景是随容器固定。随容器滚动的背景充当初始的遮罩层:
OK,可以看大,当滚动的时候,最后一幅叠加的情况,其实就是我们需要的滚动的时候展示不同的颜色(阴影)的效果。我们调整一下两个渐变的颜色,遮罩层(background-attachment: local
)为白色,再把固定不动的阴影层(background-attachment: scroll
),利用径向渐变模拟为我们想要的阴影颜色。
CSS 代码大概是这样:
1 2 3 4 5 6 7 8 | .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%)
线性渐变模拟了一层灰色阴影:
OK,大功告成。上述所有 DEMO,可以戳这里看看:
CodePen Demo -- Pure CSS Scroll shadow
如文章开头所示,这技巧也是可以直接运用在 table
里面:
CodePen Demo -- Pure CSS Table scroll shadow
一些问题
层叠顺序
当然,在上述的过程中,其实一直有个问题,就是由于是使用背景 background
模拟的阴影,其实最终的效果,内容是在阴影(背景之上的),但是实际效果其实没有很大的差别,如果能忍受这一点,这个方案是完全可用的。
兼容性
嗯,当然还有一个问题是就是 background-attachment
的兼容问题。让我们看看 CAN I USE:
Can i use 下面的注释表明,大部分兼容问题其实是出在 background-attachment: fixed
,对于本文的效果影响不大。
最后
本文技巧非原创,第一次看到来自这篇文章:探索CSS属性*-gradient的实用价值 ,对其能否在实际中运用再做了一些探究。
好了,本文到此结束。
更多精彩 CSS 技术文章汇总在我的 Github -- iCSS ,持续更新,欢迎点个 star 订阅收藏。
如果还有什么疑问或者建议,可以多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。
(^_^)打个赏喝个咖啡(^_^)


【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
2017-01-04 谈谈一些有趣的CSS题目(十一)-- reset.css 知多少?