本文介绍了利用纯CSS实现滚动阴影效果的方法。有一定的参考价值,有需要的朋友可以参考一下,希望能帮到大家。

滚动的形状(滚动滑动)

【推荐教程:CSS视频教程】

开门见山,有这样一种很常见的情况,对于一些可滚动的元素。通常在滚动时,垂直于滚动的一侧会添加一个阴影,表示某个元素当前被滚出了可视区域,就像这样:

滚动的形状(滚动滑动)

可以看到,在滚动的过程中,会出现一个阴影:

滚动的形状(滚动滑动)

对于滚动过程中两边的列是静止的,附着在边界上的问题,CSS通常使用position: sticky来解决。

但是对于只在滚动过程中出现的阴影(如果滚动容器中的内容没有粘贴,就会出现阴影,如果粘贴了,阴影就会消失),之前的做法一直是借助JS来完成的。

那么,有没有纯CSS可以实现的解决方案呢?嘿,嘿,嘿,是的。有一个非常令人愉快的掩饰。让我们一步步揭开它。

神奇的背景-附件

用纯CSS实现上面的滚动阴影,要用到的核心元素是背景附着。

在之前的文章《CSS实现视差效果》中,详细介绍了背景附着。借助background-attachment: fixed,可以简单实现网站的滚动视差或者类似于图片点击的水印效果,像这样:

滚动的形状(滚动滑动)

当然,我们今天的主角不是背景依附:固定,而是背景依附:srcoll。

背景-附件:srcoll

首先介绍背景——依恋。如果指定了background-image,那么background-attachment将确定背景在视口中是固定的还是与包含它的块一起滚动。

简单地说,它决定了背景图案如何在一个可滚动的容器中移动。通过两个简单的演示理解background-attachment: srcoll和background-attachment: local。

Background-attachment: local,这与我们的日常用法一致,一个可滚动容器的背景图案随容器滚动:

滚动的形状(滚动滑动)

背景-附件:滚动,这是今天的主角,它表明背景相对于元素本身是固定的,而不是随着其内容滚动:

滚动的形状(滚动滑动)

如果你还没搞清楚它们的区别,可以戳下面的演示自己感受一下:

演示地址:https://codepen.io/Chokcoco/pen/xJJorg

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; }

实际效果是这样的。一个背景随容器滚动,另一个背景与容器固定。与容器一起滚动的背景充当初始遮罩层:

滚动的形状(滚动滑动)

好的,可以放大。在滚动的时候,最后一张图片是叠加的,这其实就是我们在滚动的时候需要显示不同颜色(阴影)的东西。让我们调整两个渐变的颜色。背景-附件:局部)为白色,然后固定阴影层(背景-附件:滚动)用径向渐变模拟成想要的阴影颜色。

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; }

线性渐变(RGBA (0,0,0,0.5),透明100%)用于模拟灰色阴影:

滚动的形状(滚动滑动)

好了,你完成了。以上所有DEMO都可以戳这里看:

演示地址:https://codepen.io/Chokcoco/pen/QWKmjKd

如本文开头所示,这种技术也可以直接应用于表:

滚动的形状(滚动滑动)

演示地址:https://codepen.io/Chokcoco/pen/abmqMJQ

一些问题

级联顺序

当然,在上面的过程中,一直存在一个问题,就是因为背景是用来模拟阴影的,实际上最后的效果,内容是在阴影上(背景上面),但实际效果差别不是很大,如果你能容忍这一点,这个方案是完全可用的。

兼容性

嗯,当然还有一个问题,就是背景的兼容性——依恋。让我看看我能不能用:

滚动的形状(滚动滑动)

下面我能用的评论说明,兼容性问题其实大部分都在后台——附件:已修复,对本文效果影响不大。

最后

这篇文章的技巧不是原创。第一次看到是从这篇文章里:探索CSS属性*-gradient的实用价值,对能否在实际中使用做一些进一步的探索。

好了,本文到此结束。

更多编程相关知识,请访问:编程教学!!

以上是CSS实现滚动阴影效果的技巧(分享)细节。更多内容请关注AdminJS.cn其他相关文章!

adminjs.cn是一个以CSS、JavaScript、Vue、HTML为核心的前端开发技术网站。我们致力于为广大前端开发者提供专业、全面、实用的前端开发知识和技术支持。 在本网站中,您可以学习到最新的前端开发技术,了解前端开发的最新趋势和最佳实践。我们提供丰富的教程和案例,让您可以快速掌握前端开发的核心技术和流程。 Adminjs.cn还提供一系列实用的工具和插件,帮助您更加高效地进行前端开发工作。我们提供的工具和插件都经过精心设计和优化,可以帮助您节省时间和精力,提升开发效率。 在Adminjs.cn中,您可以找到您需要的一切前端开发资源,让您成为一名更加优秀的前端开发者。欢迎您加入我们的大家庭,一起探索前端开发的无限可能!

声明:本文仅供个人学习使用,来源于互联网,本文有改动,本文遵循[BY-NC-SA]协议, 如有侵犯您的权益,请联系本站,本站将在第一时间删除。谢谢你

原文地址:滚动的形状(滚动滑动)