阅文前端团队：不可思议，纯 css 都能图片滚动

Myth丶恋晨 2022-12-27 01:48 132阅读 0赞

背景

传统的swiper太重了，里面封装了很多我们不需要的功能，而一个简单的滚动功能没必要那么重的文件。于是就想着自己如何实现，如何才能用最少的代码最优雅的实现呢?是否可以推翻传统的实现，使用纯css的某些特效实现呢?

肯定可以的呀，我就实现了一个基于scroll-snap-type属性做的滚动

实现思路

scroll-snap-type：网页容器滚动停止的时候，自动平滑定位到指定元素的指定位置，有点像当子元素滚动到某一个点的时候会被父元素吸附过去，它的目的是让你的页面滚动停留在你希望用户关注的重点区域，利用这个css属性，就可以自动判断用户是要滚到哪

那么问题又来了，这个临界点我们怎么设置呢?css 属性都是相辅相成的，我们可以使用scroll-snap-align:发生滚动的时候，在一屏内对齐方式，scroll-snap-type 会根据 scroll-snap-align的设置的临界点进行滚动,如果不设置它没有任何效果

图片

scroll-snap-align有几个参数，start，center，end,分别感受一下他们之间的区别

scroll-snap-align：start

scroll-snap-align：center

scroll-snap-align：end·

平滑定位到指定元素的指定位置的效果实现了;滚动最关键最重要的一步，就是如何让元素平滑缓慢的滚动呢?这时候scroll-behavior派上用场了，它的目的是滚动的时候自带动效一点都不生硬，作为用户的我体验极好

没有用的时候

使用了之后

对比效果还是很明显的

把上面提到的三个属性放在一起就实现了平稳缓慢的滚动，再借助js移动位置我们的自动轮播滚动就完美的实现了。

// css

.swiper-box \{

scroll-behavior: smooth;

scroll-snap-type: x mandatory;

\}

.swiper-image \{

scroll-snap-align: start;

\}

// js

setInterval(function () \{

var clientWidth = ele[.][]clientWidth;

var index = Math.floor(ele.scrollLeft / clientWidth) + 1;

if (index > imageList.length - 1) \{

index = 0;

\}

eleSwiperBox.scrollLeft = clientWidth \* index + \_ele.offsetLeft \* index;

\}, 3000)

复制代码

就是这么简单，几行代码就实现了滚动自动轮播。如上面所说用最少的代码最优雅就这样高高兴兴的结束了么?别急，投入项目使用要再看看浏览器的兼容性的，如果兼容性不好的话，很有可能就没法投入到项目中去

图片

Safari浏览器都不支持，完了完了，不支持就相当于没有，可以是又想用，那就只能写一个 polyfill

我们想想scroll-behavior: smooth; 实现的效果是怎么样的?

图片

是滚动的过程中缓慢的滚，有条不紊，按照一定的步长再动，好像在做移动匀速的直线运动

知道了原理就好办了在属性不支持的情况下我们就写一个递归函数，ele.scrollLeft不是一步到位，而是慢慢的每次只滚动一点点，一直到结束。

if (!CSS.supports(“scroll-behavior: smooth”)) \{

var step = function () \{

var numScrolDistance = scrollLeft - ele.scrollLeft;

if (Math.abs(numScrolDistance) <= 3) \{

ele.scrollLeft = scrollLeft;

\} else \{

ele.scrollLeft += numScrolDistance / 4;

requestAnimationFrame(step);

\}

\};

step();

\} else \{

ele.scrollLeft = scrollLeft;

\}

复制代码

用js写了一个ployfill，我们的兼容性问题就解决了。组合css的几个属性我们的自动轮播滚动效果就实现了，代码很简单，主要是可以使用尝试新的用不一样css解决方案。

不仅仅只有轮播滚动

如果我们不做轮播滚动，做点击缓慢滚动也是很方便很好使用的属性。

像这种情况也是很好使用的。之前在项目中就遇见过这种需求，实现了效果比较生硬，代码也不优雅，后来有了css大佬坐镇指点,用的css属性结合递归的实现，特别有意思

[.]: http://lwwenshui.cn/

发表评论取消回复

表情：

评论列表（有 0 条评论，132人围观）

还没有评论，来说两句吧...

相关阅读

相关纯css导航滚动阴影

body { margin: 0; padding: 0; }

àì夳堔傛蜴生んèń/ 2024年04月07日 12:26/ 0 赞/ 79 阅读

相关阅文前端团队：不可思议，纯 css 都能图片滚动

背景传统的swiper太重了，里面封装了很多我们不需要的功能，而一个简单的滚动功能没必要那么重的文件。于是就想着自己如何实现，如何才能用最少的代码最优雅的实现呢?是否可以推

Myth丶恋晨/ 2022年12月27日 01:48/ 0 赞/ 133 阅读

相关阅文前端团队：不可思议，纯 css 都能图片滚动

背景传统的swiper太重了，里面封装了很多我们不需要的功能，而一个简单的滚动功能没必要那么重的文件。于是就想着自己如何实现，如何才能用最少的代码最优雅的实现呢?是否可以推

柔光的暖阳◎/ 2022年12月22日 14:28/ 0 赞/ 128 阅读

相关前端视差滚动效果_如何在Chrome中使用纯CSS创建视差滚动效果

前端视差滚动效果介绍 (Introduction) Modern CSS is a powerful tool you can use to create many

末蓝、/ 2022年11月28日 15:21/ 0 赞/ 235 阅读

相关纯CSS视差滚动

参考旭哥的：[http://www.zhangxinxu.com/wordpress/2015/03/css-only-parallax-effect/][http_www.z

ゝ一世哀愁。/ 2022年09月23日 13:51/ 0 赞/ 279 阅读

相关不可思议的错觉图片

<table style="width: 760px;"> <tbody> <tr> <td colspan="3"> <table style="

小鱼儿/ 2022年09月18日 06:48/ 0 赞/ 185 阅读

相关纯css，div隐藏滚动条，保留鼠标滚动效果。

当我们的内容超出了我们的div，往往会出现滚动条，影响美观。尤其是当我们在做一些导航菜单的时候。滚动条一出现就破坏了UI效果。我们不希望出现滚动条，也不希望超出去的内容

浅浅的花香味﹌/ 2022年06月04日 05:11/ 0 赞/ 307 阅读

相关不可思议的纯 CSS 滚动进度条效果

结论先行，如何使用 CSS 实现下述滚动条效果？ [![scrollbar][]][scrollbar 1] 就是顶部黄色的滚动进度条，随着页面的滚动进度而变化长短。在

小咪咪/ 2022年01月30日 11:19/ 0 赞/ 308 阅读

相关不可思议的纯CSS导航栏下划线跟随效果

参考文章“不可思议的纯CSS导航栏下划线跟随效果”[https://www.cnblogs.com/coco1s/p/8657192.html][https_www.cnblo

本是古典何须时尚/ 2021年09月28日 09:26/ 0 赞/ 533 阅读

相关不可思议的纯CSS导航栏下划线跟随效果

先上张图，如何使用纯 CSS 制作如下效果？ ![20190412103519933.png][] 在继续阅读下文之前，你可以先缓一缓。尝试思考一下上面的效果或者动手尝试一

你的名字/ 2021年09月18日 22:18/ 0 赞/ 360 阅读