不可思议,纯 CSS 实现图片滚动

本文作者:张敏

原创声明:本文为阅文前端团队 YFE 成员出品,请尊重原创,转载请联系公众号 (id: yuewen_YFE) 获取授权,并注明作者、出处和链接。

背景

传统的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属性结合递归的实现,特别有意思

代码封装一下

把上面的代码稍微封装一下,写成一个组件,在我们的在项目中就可以随意使用了,一次封装终身享用。都是原生的实现,没有框架的限制,有兼容性的处理。 还附带了图片懒加载和异常处理

代码封装

  1. 可以npm安装使用

npm i snap-swiper

import "snap-swiper/snap-swiper.css";
const snapSwiper = require("snap-swiper");
snapSwiper({
    imageList:[],
    el,
 });
复制代码

npm 下载使用demo

代码地址

参考文章

CSS scroll-snap滚动事件停止及元素位置检测

大侠,请留步,要不过来了解下CSS Scroll Snap?

 收藏 (0) 打赏

您可以选择一种方式赞助本站

支付宝扫一扫赞助

微信钱包扫描赞助

本作品采用CC BY-NC-SA 4.0进行许可:小李子的blog » 不可思议,纯 CSS 实现图片滚动

分享到: 生成海报

评论 抢沙发

  • QQ号
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
切换注册

登录

点击按钮进行验证

忘记密码 ?

您也可以使用第三方帐号快捷登录

切换登录

注册

我们将发送一封验证邮件至你的邮箱, 请正确填写以完成账号注册和激活