ScrollSnap全屏滚动效果

最新推荐文章于 2024-06-03 19:14:03 发布

带脑子的CV工程师

最新推荐文章于 2024-06-03 19:14:03 发布

阅读量1k

点赞数

文章标签： javascript css css3

本文链接：https://blog.csdn.net/qq_36262295/article/details/122253300

版权

scrollsnap MDN链接

仅用CSS实现fullpage.js全屏滚动效果

scroll-snap-type
scroll-snap-align

并不能替代fullpage.js有下面2个原因

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

使用

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

scroll-snap-type

none：当这个滚动容器的可视的 viewport 是滚动的，不做任何处理。
x：滚动容器只捕捉其水平轴上的捕捉位置。
y：滚动容器只捕捉其垂直轴上的捕捉位置。
block：滚动容器仅捕捉到其块轴上的捕捉位置。
inline：滚动容器仅捕捉到其内联轴上的捕捉位置。
both：滚动容器会独立捕捉到其两个轴上的位置（可能会捕捉到每个轴上的不同元素）。
mandatory：如果滚动容器被滚动，那么它超过临界值后会自动滚动到下个容器上。
proximity：如果滚动容器被滚动，那么它超过临界值后不会自动滚动到下个容器上。

scroll-snap-align

在这里插入图片描述

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



<!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>

带脑子的CV工程师

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
ScrollSnap全屏滚动效果

scrollsnap MDN链接仅用CSS实现fullpage.js全屏滚动效果scroll-snap-typescroll-snap-align并不能替代fullpage.js有下面2个原因它们在浏览器上面存在兼容性问题。CSS属性无法监听事件，也就无法提供动画完成时的回调函数。使用，scroll-snap-type属性放在需要全屏滚动的容器的父容器上，而scroll-snap-align则需要放在全屏滚动的容器上，多说无益，我们直接来看一下代码就可以很清楚的知道如何使用这两个CS
复制链接

扫一扫