CSS如何实现可滚动元素的阴影效果？
发布时间：2023-09-11 11:32:00 所属栏目：语言 来源：
导读： 在开发过程中，我们经常会使用到CSS滚动效果，例如表格滚动，图片滚动等等，对于一些可滚动的元素而言，想要视觉效果更好一些，通常在滚动的时候会给垂直于滚动的一侧添加一个阴影，用于表明当前有元素被滚动
|
在开发过程中，我们经常会使用到CSS滚动效果，例如表格滚动，图片滚动等等，对于一些可滚动的元素而言，想要视觉效果更好一些，通常在滚动的时候会给垂直于滚动的一侧添加一个阴影，用于表明当前有元素被滚动给该滚出了可视区域，如下图所展示一样。那么这样的效果要怎么样实现呢? 可以看到，在滚动的过程中，会出现一条阴影： 对于两侧的列在滚动的过程中，静止不动，吸附在边界的问题，通常 CSS 使用position: sticky即可解决。但是对于滚动过程中才出现的阴影（滚动容器内的内容没有贴边，则阴影出现，贴边，则阴影消失），之前的做法一直都是需要借助 JS 完成的。那么，有没有纯 CSS 能够实现的方案呢？有一种非常讨巧的障眼法，下面就让我们来一步一步揭开它的面纱。 神奇的background-attachment 要使用纯 CSS 实现上述滚动阴影，最核心的要使用到的元素就是background-attachment。借助background-attachment: fixed可以简单的实现网站的滚动视差或者是类似图片点击的水纹效果，类似这样： 当然，今天我们的主角不是background-attachment: fixed，而是background-attachment: srcoll。 首先，介绍一下background-attachment，如果指定了background-image，那么background-attachment决定背景是在视口中固定的还是随着包含它的区块滚动的。 简单而言，就是决定了在可滚动的容器中，背景图案是如何进行运动的。通过两个简单的 Demo，弄懂background-attachment: srcoll和background-attachment: local。background-attachment: local，这个就是和我们日常使用中的用法是一致的，可滚动容器的背景图案随着容器进行滚动： 所以这里，我们借助background-attachment: srcoll和background-attachment: local两个属性，在滚动初始的时候，利用两层背景叠加在一起隐藏阴影背景，真正滚动的时候，将叠加的部分移走，只漏出阴影部分即可。 当滚动的时候，最后一幅叠加的情况，其实就是我们需要的滚动的时候展示不同的颜色（阴影）的效果。我们调整一下两个渐变的颜色，遮罩层（background-attachment: local）为白色，再把固定不动的阴影层（background-attachment: scroll），利用径向渐变模拟为我们想要的阴影颜色。 当然，在上述的过程中，其实一直有个问题，就是由于是使用背景background模拟的阴影，其实最终的效果，内容是在阴影（背景之上的），但是实际效果其实没有很大的差别，如果能忍受这一点，这个方案是完全可用的。 兼容性 Can i use 下面的注释表明，大部分兼容问题其实是出在background-attachment: fixed，对于本文的效果影响不大。 本文技巧非原创，第一次看到来自这篇文章：探索CSS属性*-gradient的实用价值，对其能否在实际中运用再做了一些探究。 以上就是关于CSS实现滚动效果且添加阴影的介绍，有需要的朋友可以参考一下上述代码，希望本文对大家学习有帮助，想要了解更多CSS滚动效果的内容大家可以继续关注其他文章。 （编辑：汽车网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
