久久久久一本一区二区青青蜜月,欧美精品一区二,日韩一区二区在线播放

主頁 > 知識庫 > CSS實現fullpage.js全屏滾動效果的示例代碼

CSS實現fullpage.js全屏滾動效果的示例代碼

最近研究CSS的時候發現了 僅使用兩個CSS屬性就可以制作出全屏滾動效果 ，這兩個屬性就是：

scroll-snap-type
scroll-snap-align

使用它就可以實現 fullpage.js 這種全屏滾動效果，其實，這種全屏滾動效果的理論非常簡單，就是使用js監聽界面滾動，當界面滾動到某個值時就讓界面持續滾動到下一個屏幕，但是！要考慮到屏幕尺寸大小帶來的兼容性問題就是一件非常麻煩的事情。

今天說的這兩個屬性并不能替代 fullpage.js ，有下面2個原因：

它們在瀏覽器上面存在兼容性問題。
CSS屬性無法監聽事件，也就無法提供動畫完成時的回調函數。

1. 兼容性

目前主流的瀏覽器都已經支持了這兩個CSS屬性，可以放心的使用。如果你需要兼容IE瀏覽器，那么請選擇 fullpage.js 。

2. 使用

使用的方法其實很簡單， scroll-snap-type 屬性放在 需要全屏滾動的容器的父容器上 ，而 scroll-snap-align 則需要 放在全屏滾動的容器上 ，多說無益，我們直接來看一下代碼就可以很清楚的知道如何使用這兩個CSS屬性。

整個網頁的完整代碼很簡單，下面直接將它貼上來：

<!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屬性。