使用纯 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
,再叠加起来,像是这样:
<!-- 可滚动容器 -->
<ul>
<li>...</li>
...
<li>...</li>
</ul>
// 情形一:
.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 代码大概是这样:
.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 订阅收藏。
如果还有什么疑问或者建议,可以多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。
使用纯 CSS 实现滚动阴影效果的更多相关文章
- js控制固定div和随屏滚动div兼容多浏览器和纯css控制(来自网络)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 不可思议的纯 CSS 滚动进度条效果
结论先行,如何使用 CSS 实现下述滚动条效果? 就是顶部黄色的滚动进度条,随着页面的滚动进度而变化长短. 在继续阅读下文之前,你可以先缓一缓.尝试思考一下上面的效果或者动手尝试一下,不借助 JS , ...
- 一、纯css实现顶部进度条随滚动条滚动
一.效果图 二.直接复制粘贴 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...
- 纯css使用线性渐变实现滚动进度条(来自于微信前端早读课)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 利用target的特性,可以实现纯css的tab效果切换
基础知识: :target起作用的是href连接到的位置 如 <a href="#tab1">tab1</a> <div id="tab1& ...
- CSS布局技巧 -- 纯CSS让子元素的宽度总和决定其父元素的宽度
使用场景 在移动端屏幕宽度有限的前提下,使用横向滚动的方式展示更多的内容.在这样的需求下,希望父元素作为容器,其宽度可以又横向排列资源的总宽度动态撑开,超过祖父元素的宽度:在不超过祖父元素时,自动继承 ...
- 纯 CSS 实现波浪效果!
一直以来,使用纯 CSS 实现波浪效果都是十分困难的. 因为实现波浪的曲线需要借助贝塞尔曲线. 而使用纯 CSS 的方式,实现贝塞尔曲线,额,暂时是没有很好的方法. 当然,借助其他力量(SVG.CAN ...
- 纯 CSS 利用 label + input 实现选项卡
clip 属性 用于剪裁绝对定位元素. .class { position:absolute; clip:rect(0px,60px,200px,0px); } scroll-behavior: sm ...
- 利用CSS3 filter:drop-shadow实现纯CSS改变图片颜色
体验更优排版请移步原文:http://blog.kwin.wang/programming/css3-filter-drop-shadow-change-color.html 之前做项目过程中有时候遇 ...
随机推荐
- 欢迎使用CSDN-markdown编辑器(这个只能看到一次保存一下)
欢迎使用Markdown编辑器写博客 本Markdown编辑器使用StackEdit修改而来,用它写博客,将会带来全新的体验哦: Markdown和扩展Markdown简洁的语法 代码块高亮 图片链接 ...
- 从TFS到git的持续集成之路
前言 公司目前使用TFS,由于TFS不灵活不能很好的持续集成,且给测试造成很大重的负担,所以近期准备迁移到git上 目标 解决项目运转的瓶颈(版本太多,导致测试跟不上,需引入自动化测试) 过程 主线分 ...
- 第八章 Python类中常用的特殊变量和方法
上章花了近三十章节介绍类的知识,本章估计内容也比较多,讲完这些,其实还有更多.为什么这么多类有关的知识呢,这是因为在Python里面一切皆对象,就连整型.浮点数.字符串这些比较常规的类型都是作为类来实 ...
- PyQt学习随笔:Model和View之间的数据互动过程
在<PyQt学习随笔:Qt中tem Views(Model-Based)和Item Widgets(Item-Based)控件的用途和关系>中介绍了,Model用于存储数据,View用于展 ...
- PyQt(Python+Qt)学习随笔:QTableView的cornerButtonEnabled属性
老猿Python博文目录 老猿Python博客地址 cornerButtonEnabled属性用于控制是否启用左上角的按钮.如果此属性为True,则启用视图左上角的按钮,单击此按钮将选择表视图中的所有 ...
- Java数据结构(十五)—— 多路查找树
多路查找树 二叉树和B树 二叉树的问题分析 二叉树操作效率高 二叉树需要加载到内存,若二叉树的节点多存在如下问题: 问题1:构建二叉树时,需多次进行I/O操作,对与速度有影响 问题2:节点海量造成二叉 ...
- secret_key伪造session来进行越权
从swpuctf里面的一道ctf题目来讲解secret_key伪造session来进行越权. 以前没有遇到过这种题目,这次遇到了之后查了一些资料把它做了出来,记录一下知识点. 参考资料 http:// ...
- tcp socket学习
更新一波学的socket编程,socket还是比较重要的,探测端口,连接服务底层都是socket编程.tcp有server 和 client.client和udp发送差不多. server端是建立了两 ...
- float和double有什么区别?
float和double在游戏行业肯定是用的很多的,虽然这是个很基础的问题,但是面试时被问到还是感觉说的不是很好. 所以还是总结一下: float 单精度浮点数在机内占 4 个字节,用 32 位二进制 ...
- AGC039D 题解
题目描述 给定在笛卡尔坐标系的单位圆上的\(N\)个点(圆心为\((0, 0)\)).第\(i\)个点的坐标为\((cos(\frac{2 \pi T_i}{L}), sin(\frac{2 \pi ...