使用纯 CSS 实现滚动阴影效果_CSS教程_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: srcollbackground-attachment: local

background-attachment: local,这个就是和我们日常使用中的用法是一致的,可滚动容器的背景图案随着容器进行滚动:

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

如果你还没弄明白他们的区别,可以戳下面的 DEMO 自己感受一下:

CodePen Demo -- bg-attachment Demo

srcolllocal同时使用,实现障眼法

到这里,可能很多同学还是懵的,我们到底要做什么呢?这个和本文的滚动阴影有什么关联呢?

别急,滚动阴影的难点在于,初始没有滚动的时候是没有阴影展现的,只有当开始滚动,阴影才会出现。

所以这里,我们借助background-attachment: srcollbackground-attachment: local两个属性,在滚动初始的时候,利用两层背景叠加在一起隐藏阴影背景,真正滚动的时候,将叠加的部分移走,只漏出阴影部分即可。

嗯?什么意思。我们用给滚动容器,加上两个渐变效果,分别运用上background-attachment: srcollbackground-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 实现滚动阴影效果的文章就介绍到这了,更多相关CSS 实现滚动阴影内容请搜索真格学网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持真格学网!


  • 本文相关:
  • 纯css3实现横向无限滚动的示例代码
  • css3制作圆形滚动进度条动画的示例
  • css实现隐藏滚动条并可以滚动内容的实例代码
  • css3实现3d小球滚动撞击遮挡板特效源码
  • css3实现无缝滚动防抖
  • css文字阴影渐渐模糊效果的实现
  • css3悬停按钮-css3鼠标悬停按钮阴影缩放特效代码
  • 如何用纯css制作动态网页效果?
  • 使用CSS+div能否制作出如图的网页阴影 如果可以该...
  • 网页滚动视觉差效果css怎么做
  • 如何利用CSS3阴影效果制作出立体感效果
  • 如何用CSS实现DIV块的阴影效果
  • css+div页面两侧的阴影怎样实现的
  • css阴影效果,如图所示的阴影效果怎么实现
  • 怎样用纯css做出轮播图效果
  • CSS3四周阴影效果怎么做?
  • 如何用css实现网页的动态效果
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全主页网页制作csscss教程css滚动阴影css3实现3d小球滚动撞击遮挡板特效源码css3实现无缝滚动防抖css3悬停按钮-css3鼠标悬停按钮阴影缩放特效代码css教程css3div+css教程web标准教程浏览器兼容教程css布局实例css控制ul li 的样式详解(推荐)html设置超链接字体颜色和点击后的字体颜色div水平垂直居中的完美解决方案css设置各种中文字体如雅黑、黑体、宋体、楷体等等css 文本字体颜色设置方法(css color)css 漂亮搜索框美化代码css自定义select下拉选择框的样式(不用其他标签模拟)css圆角效果 -webkit-border-radius(css3中border-radcss 中的background:transparent到底是什么意思有什么css 首行缩进两个文字使用纯 css 实现滚动阴影效果css仿苹果平滑开关按钮效果css实现弹窗上下左右居中且背景透明锁定窗口效果css 利用 position + margin 实现固定盒子横向纵向居css 鼠标悬浮在图片上添加遮罩层效果的实现总结下常用的nth-child选择符 css3简易切割轮播图的实现代码table表格使用:nth-child()实现隔行变色与对齐css实现背景图片屏幕自适应的实现css实现小图下拉查看大图和信息的方法
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved