用CSS怎样做成可滚动元素的阴影效果？
发布时间：2022-04-14 14:02:22 所属栏目：语言 来源：互联网
导读：在开发过程中，我们经常会使用到CSS滚动效果，例如表格滚动，图片滚动等等，对于一些可滚动的元素而言，想要视觉效果更好一些，通常在滚动的时候会给垂直于滚动的一侧添加一个阴影，用于表明当前有元素被滚动给该滚出了可视区域，如下图所展示一样。那么这样
|
在开发过程中，我们经常会使用到CSS滚动效果，例如表格滚动，图片滚动等等，对于一些可滚动的元素而言，想要视觉效果更好一些，通常在滚动的时候会给垂直于滚动的一侧添加一个阴影，用于表明当前有元素被滚动给该滚出了可视区域，如下图所展示一样。那么这样的效果要怎么样实现呢? 对于两侧的列在滚动的过程中，静止不动，吸附在边界的问题，通常 CSS 使用position: sticky即可解决。但是对于滚动过程中才出现的阴影（滚动容器内的内容没有贴边，则阴影出现，贴边，则阴影消失），之前的做法一直都是需要借助 JS 完成的。那么，有没有纯 CSS 能够实现的方案呢？嘿嘿嘿，有。有一种非常讨巧的障眼法，下面就让我们来一步一步揭开它的面纱。 神奇的background-attachment 要使用纯 CSS 实现上述滚动阴影，最核心的要使用到的元素就是background-attachment。借助background-attachment: fixed可以简单的实现网站的滚动视差或者是类似图片点击的水纹效果，类似这样： 如果你还没弄明白他们的区别，可以戳下面的 DEMO 自己感受一下： CodePen Demo -- bg-attachment Demo srcoll与local同时使用，实现障眼法 到这里，可能很多同学还是懵的，我们到底要做什么呢？这个和本文的滚动阴影有什么关联呢？别急，滚动阴影的难点在于，初始没有滚动的时候是没有阴影展现的，只有当开始滚动，阴影才会出现。 所以这里，我们借助background-attachment: srcoll和background-attachment: local两个属性，在滚动初始的时候，利用两层背景叠加在一起隐藏阴影背景，真正滚动的时候，将叠加的部分移走，只漏出阴影部分即可。 （编辑：云计算网_泰州站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
浙公网安备 33038102330476号