CSS实现fullpage.js全屏滚动效果的示例代码


Posted in HTML / CSS onMarch 24, 2021

最近研究CSS的时候发现了 仅使用两个CSS属性就可以制作出全屏滚动效果 ,这两个属性就是:

  • scroll-snap-type
  • scroll-snap-align

使用它就可以实现 fullpage.js 这种全屏滚动效果,其实,这种全屏滚动效果的理论非常简单,就是使用js监听界面滚动,当界面滚动到某个值时就让界面持续滚动到下一个屏幕,但是!要考虑到屏幕尺寸大小带来的兼容性问题就是一件非常麻烦的事情。

今天说的这两个属性并不能替代 fullpage.js ,有下面2个原因:

  1. 它们在浏览器上面存在兼容性问题。
  2. CSS属性无法监听事件,也就无法提供动画完成时的回调函数。

1. 兼容性

目前主流的浏览器都已经支持了这两个CSS属性,可以放心的使用。如果你需要兼容IE浏览器,那么请选择 fullpage.js 。

2. 使用

使用的方法其实很简单, scroll-snap-type 属性放在 需要全屏滚动的容器的父容器上 ,而 scroll-snap-align 则需要 放在全屏滚动的容器上 ,多说无益,我们直接来看一下代码就可以很清楚的知道如何使用这两个CSS属性。

CSS实现fullpage.js全屏滚动效果的示例代码

整个网页的完整代码很简单,下面直接将它贴上来:

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS scroll snap</title>
    <style>
      body {
        margin: 0;
      }
 
      .container {
        height: 100vh;
        overflow-y: scroll;
        /* 在父容器上面使用 scroll-snap-type 属性 */
        scroll-snap-type: y mandatory;
      }
 
      section {
        padding: 112px;
        height: calc(100vh - 224px);
        color: white;
        /* 在需要滚动的容器上使用 scroll-snap-align 属性 */
        scroll-snap-align: start;
      }
 
      section:nth-of-type(1) {
        background-color: #60af15;
      }
 
      section:nth-of-type(2) {
        background-color: #158baf;
      }
 
      section:nth-of-type(3) {
        background-color: #af1581;
      }
 
      section h3 {
        font-size: 48px;
      }
 
      section p {
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <section>
        <h3>A subtitle lives here</h3>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus
          deleniti dignissimos ducimus expedita iure maxime qui rerum veniam
          voluptatibus. Accusamus asperiores assumenda atque consectetur
          consequuntur culpa cum deserunt dicta distinctio error excepturi fuga
          ipsa iste magnam modi nobis, obcaecati, pariatur perspiciatis placeat
          quo quod reiciendis repudiandae saepe soluta tempora unde vel? Aliquam
          exercitationem iste maiores placeat reprehenderit voluptates
          voluptatum. Ad at commodi culpa cumque debitis delectus dolorum, eius
          error et explicabo harum in ipsum iste labore laborum libero magni
          maiores nam non nostrum nulla officia pariatur quam quasi quia quo
          recusandae reprehenderit saepe similique vel vero vitae voluptas
          voluptatem! Quibusdam.
        </p>
      </section>
      <section>
        <h3>A subtitle lives here</h3>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus
          deleniti dignissimos ducimus expedita iure maxime qui rerum veniam
          voluptatibus. Accusamus asperiores assumenda atque consectetur
          consequuntur culpa cum deserunt dicta distinctio error excepturi fuga
          ipsa iste magnam modi nobis, obcaecati, pariatur perspiciatis placeat
          quo quod reiciendis repudiandae saepe soluta tempora unde vel? Aliquam
          exercitationem iste maiores placeat reprehenderit voluptates
          voluptatum. Ad at commodi culpa cumque debitis delectus dolorum, eius
          error et explicabo harum in ipsum iste labore laborum libero magni
          maiores nam non nostrum nulla officia pariatur quam quasi quia quo
          recusandae reprehenderit saepe similique vel vero vitae voluptas
          voluptatem! Quibusdam.
        </p>
      </section>
      <section>
        <h3>A subtitle lives here</h3>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus
          deleniti dignissimos ducimus expedita iure maxime qui rerum veniam
          voluptatibus. Accusamus asperiores assumenda atque consectetur
          consequuntur culpa cum deserunt dicta distinctio error excepturi fuga
          ipsa iste magnam modi nobis, obcaecati, pariatur perspiciatis placeat
          quo quod reiciendis repudiandae saepe soluta tempora unde vel? Aliquam
          exercitationem iste maiores placeat reprehenderit voluptates
          voluptatum. Ad at commodi culpa cumque debitis delectus dolorum, eius
          error et explicabo harum in ipsum iste labore laborum libero magni
          maiores nam non nostrum nulla officia pariatur quam quasi quia quo
          recusandae reprehenderit saepe similique vel vero vitae voluptas
          voluptatem! Quibusdam.
        </p>
      </section>
    </div>
  </body>
</html>

可以看到代码并不复杂,下面我们就着重讲解一下这两个CSS属性。

3. scroll-snap-type

该CSS属性拥有下面这些值:

none:当这个滚动容器的可视的 viewport 是滚动的,不做任何处理。

  • x :滚动容器只捕捉其水平轴上的捕捉位置。
  • y :滚动容器只捕捉其垂直轴上的捕捉位置。
  • block:滚动容器仅捕捉到其块轴上的捕捉位置。
  • inline:滚动容器仅捕捉到其内联轴上的捕捉位置。
  • both:滚动容器会独立捕捉到其两个轴上的位置(可能会捕捉到每个轴上的不同元素)。
  • mandatory :如果滚动容器被滚动,那么它超过临界值后会自动滚动到下个容器上。
  • proximity :如果滚动容器被滚动,那么它超过临界值后不会自动滚动到下个容器上。

其中需要注意的就是上面粗体标注的几个属性,使用 mandatory 就是全屏滚动, 则当滚动过一定阈值后,会自动滚动到下一屏幕,如果没有滚动过某一阈值,则回弹。

而 proximity 不一样的是: 滚动过一定阈值后,就可以正常进行滚动(而 mandatory 是直接进入下一屏),如果没有滚动过某一阈值,则回弹。

理解这两个属性其实非常简单,将上面的代码改改自己体验下就明白了。

注:使用 mandatory ,如果 滚动容器的高度已经大于屏幕的高度时 需要慎用,因为可能会导致有一部分内容因为强制滚屏的原因导致阅读起来非常困难。

4. scroll-snap-align

该CSS属性拥有下面这些值:

none:该容器不会进行定义在父容器上面对应轴的捕捉。 start:该容器被捕捉的位置是该容器开始的部分。 end:该容器被捕捉的位置是该容器结束的部分。 center:该容器被捕捉的位置是该容器中间的部分。

用一张图可以很形象的明白这些属性所代表的容器位置:

CSS实现fullpage.js全屏滚动效果的示例代码

5. 最后

因为我看到 scroll-snap 的 其它属性大部分都存在很严重的兼容性问题 ,所以就不在这里细讲了,如果有兴趣的话可以到 CSS Scroll Snap 直接查看,不过使用上面的这两个属性其实已经完全够用了。

参考文章:

  1. scroll-snap-align MDN
  2. scroll-snap-type MDN
  3. Practical CSS Scroll Snapping
HTML / CSS 相关文章推荐
CSS心形加载的动画源码的实现
Mar 09 HTML / CSS
CSS3实现类似翻书效果的过渡动画的示例代码
Sep 06 HTML / CSS
css3气泡 css3关键帧动画创建的动态通知气泡
Feb 26 HTML / CSS
css3中检验表单的required,focus,valid和invalid样式
Feb 21 HTML / CSS
一款基于css3的列表toggle特效实例教程
Jan 04 HTML / CSS
利用css3径向渐变做一张优惠券的示例
Mar 22 HTML / CSS
CSS3使用transition属性实现过渡效果
Apr 18 HTML / CSS
html5应用缓存_动力节点Java学院整理
Jul 13 HTML / CSS
HTML5中的Scoped属性使用实例
Apr 23 HTML / CSS
HTML5 新标签全部总汇(推荐)
Jun 13 HTML / CSS
使用Html5中的cavas画一面国旗
Sep 25 HTML / CSS
微信小程序canvas实现水平、垂直居中效果
Feb 05 HTML / CSS
css animation配合SVG制作能量流动效果
如何通过 CSS 写出火焰效果
Html5移动端div固定到底部实现底部导航条的几种方式
Mar 09 #HTML / CSS
HTML5拖拽文件上传的示例代码
Mar 04 #HTML / CSS
html5使用window.postMessage进行跨域实现数据交互的一次实战
Feb 24 #HTML / CSS
Canvas在超级玛丽游戏中的应用详解
Feb 06 #HTML / CSS
Html5移动端网页端适配(js+rem)
Feb 03 #HTML / CSS
You might like
利用discuz实现PHP大文件上传应用实例代码
2008/11/14 PHP
PHPLog php 程序调试追踪工具
2009/09/09 PHP
php in_array 函数使用说明与in_array需要注意的地方说明
2010/04/13 PHP
解析CI即CodeIgniter框架在Nginx下的重写规则
2013/06/03 PHP
php代码架构的八点注意事项
2016/01/25 PHP
PHP安装GeoIP扩展根据IP获取地理位置及计算距离的方法
2016/07/01 PHP
简单的jquery左侧导航栏和页面选中效果
2014/08/21 Javascript
jQuery使用$.ajax进行即时验证实例详解
2015/12/11 Javascript
jsonp跨域请求数据实现手机号码查询实例分析
2015/12/12 Javascript
js如何准确获取当前页面url网址信息
2020/09/13 Javascript
jQuery+Ajax+PHP弹出层异步登录效果(附源码下载)
2016/05/27 Javascript
判断js的Array和Object的实现方法
2016/08/29 Javascript
微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义实例
2016/12/08 Javascript
JS实现的样式切换功能tableCSS实例
2016/12/30 Javascript
jquery封装插件时匿名函数形参和实参的写法解释
2017/02/14 Javascript
JavaScript中Require调用js的实例分享
2017/10/27 Javascript
jQuery+koa2实现简单的Ajax请求的示例
2018/03/06 jQuery
在vue中v-bind使用三目运算符绑定class的实例
2018/09/29 Javascript
详解使用webpack+electron+reactJs开发windows桌面应用
2019/02/01 Javascript
一次让你了解全部JavaScript的作用域
2019/06/24 Javascript
vue 使用element-ui中的Notification自定义按钮并实现关闭功能及如何处理多个通知
2019/08/17 Javascript
json字符串对象转换代码实例
2019/09/28 Javascript
微信小程序实现下拉加载更多商品
2020/12/29 Javascript
[16:21]教你分分钟做大人:圣堂刺客
2014/12/03 DOTA
教你用 Python 实现微信跳一跳(Mac+iOS版)
2018/01/04 Python
python爬虫超时的处理的实例
2018/12/19 Python
python实现诗歌游戏(类继承)
2019/02/26 Python
利用CSS3实现动态的二级三级菜单效果实例源码
2017/01/04 HTML / CSS
Shopping happy life西班牙:以最优惠的价格提供最好的时尚配饰
2020/03/13 全球购物
EJB timer的种类
2014/10/28 面试题
材料加工硕士生求职信
2013/10/10 职场文书
财务人员求职自荐书范文
2014/02/10 职场文书
小学生作文评语
2014/04/18 职场文书
创业融资计划书
2014/04/25 职场文书
护士2014年终工作总结
2014/11/11 职场文书
导游词之安徽巢湖
2019/12/26 职场文书