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

CSS實現(xiàn)fullpage.js全屏滾動效果的示例代碼

熱門標(biāo)簽:電話機器人鑰匙扣 400電話唐山辦理 電銷外呼系統(tǒng)是違法的嗎 旅游地圖標(biāo)注線路 漯河外呼調(diào)研線路 電銷專用外呼線路 廣西房產(chǎn)智能外呼系統(tǒng)推薦 地圖標(biāo)注位置怎么弄圖 威力最大的電銷機器人

最近研究CSS的時候發(fā)現(xiàn)了 僅使用兩個CSS屬性就可以制作出全屏滾動效果 ,這兩個屬性就是:

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

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

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

  1. 它們在瀏覽器上面存在兼容性問題。
  2. CSS屬性無法監(jiān)聽事件,也就無法提供動畫完成時的回調(diào)函數(shù)。

1. 兼容性

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

2. 使用

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

整個網(wǎng)頁的完整代碼很簡單,下面直接將它貼上來:

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

可以看到代碼并不復(fù)雜,下面我們就著重講解一下這兩個CSS屬性。

3. scroll-snap-type

該CSS屬性擁有下面這些值:

none:當(dāng)這個滾動容器的可視的 viewport 是滾動的,不做任何處理。

  • x :滾動容器只捕捉其水平軸上的捕捉位置。
  • y :滾動容器只捕捉其垂直軸上的捕捉位置。
  • block:滾動容器僅捕捉到其塊軸上的捕捉位置。
  • inline:滾動容器僅捕捉到其內(nèi)聯(lián)軸上的捕捉位置。
  • both:滾動容器會獨立捕捉到其兩個軸上的位置(可能會捕捉到每個軸上的不同元素)。
  • mandatory :如果滾動容器被滾動,那么它超過臨界值后會自動滾動到下個容器上。
  • proximity :如果滾動容器被滾動,那么它超過臨界值后不會自動滾動到下個容器上。

其中需要注意的就是上面粗體標(biāo)注的幾個屬性,使用 mandatory 就是全屏滾動, 則當(dāng)滾動過一定閾值后,會自動滾動到下一屏幕,如果沒有滾動過某一閾值,則回彈。

proximity 不一樣的是: 滾動過一定閾值后,就可以正常進(jìn)行滾動(而 mandatory 是直接進(jìn)入下一屏),如果沒有滾動過某一閾值,則回彈。

理解這兩個屬性其實非常簡單,將上面的代碼改改自己體驗下就明白了。

注:使用 mandatory ,如果 滾動容器的高度已經(jīng)大于屏幕的高度時 需要慎用,因為可能會導(dǎo)致有一部分內(nèi)容因為強制滾屏的原因?qū)е麻喿x起來非常困難。

4. scroll-snap-align

該CSS屬性擁有下面這些值:

none:該容器不會進(jìn)行定義在父容器上面對應(yīng)軸的捕捉。 start:該容器被捕捉的位置是該容器開始的部分。 end:該容器被捕捉的位置是該容器結(jié)束的部分。 center:該容器被捕捉的位置是該容器中間的部分。

用一張圖可以很形象的明白這些屬性所代表的容器位置:

5. 最后

因為我看到 scroll-snap其它屬性大部分都存在很嚴(yán)重的兼容性問題 ,所以就不在這里細(xì)講了,如果有興趣的話可以到 CSS Scroll Snap 直接查看,不過使用上面的這兩個屬性其實已經(jīng)完全夠用了。

參考文章:

scroll-snap-align MDN

scroll-snap-type MDN

Practical CSS Scroll Snapping

到此這篇關(guān)于CSS實現(xiàn)fullpage.js全屏滾動效果的示例代碼的文章就介紹到這了,更多相關(guān)CSS全屏滾動內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持腳本之家!

標(biāo)簽:試駕邀約 欽州 無錫 湖北 湘西 綏化 焦作 銅陵

巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《CSS實現(xiàn)fullpage.js全屏滾動效果的示例代碼》,本文關(guān)鍵詞  CSS,實現(xiàn),fullpage.js,全屏,;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題,煩請?zhí)峁┫嚓P(guān)信息告之我們,我們將及時溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《CSS實現(xiàn)fullpage.js全屏滾動效果的示例代碼》相關(guān)的同類信息!
  • 本頁收集關(guān)于CSS實現(xiàn)fullpage.js全屏滾動效果的示例代碼的相關(guān)信息資訊供網(wǎng)民參考!
  • 推薦文章