原生js實現全屏滾動--fullPage

yuanzhanghu 發布于2019-08-23 15:07 / 1212人閱讀

摘要：原生實現全屏滾動點擊箭頭，實現下一頁滾輪事件上滑下滑滾動到對應頁定時器解決函數連續執行頁面滾動，導航對應變化點擊導航，頁面滾動部分全屏滾動第頁第頁第頁第頁第頁下三角部分容器全屏滾動容器全屏滾動下一頁和部分圖片

原生js實現全屏滾動 fullPage.js

    function fullPage() {
      const fullPage = document.getElementsByClassName("full_page")[0];
      const fullPageItems = fullPage.getElementsByClassName("full_page_item");
      const sliderTab = document.getElementsByClassName("slider_tab")[0];
      const sliderTabItems = document.getElementsByTagName("li");
      const sliderTabDivs = document.getElementsByClassName("small_tab");
      const sliderTabImgs = sliderTab.getElementsByTagName("img");
      const nextPage = document.getElementsByClassName("next_page")[0];
      
      let pageIndex = 0, pageScroll = true, prevIndex = 0;
      
      document.onmousewheel = mouseWheel;
      document.addEventListener("DOMMouseScroll", mouseWheel)
    
      // 點擊箭頭，實現下一頁
      nextPage.onclick = scrollDown
    
      sliderTabClick()
    
      // 滾輪事件
      function mouseWheel(e) {
        if(e.wheelDelta) {
          if(e.wheelDelta > 0) {
            scrollUp()
          } else {
            scrollDown()
          }
        } else {
          if(e.detail > 0) {
            scrollDown()
          } else {
            scrollUp()
          }
        }
      }
    
      // 上滑
      function scrollUp() {
        if(pageIndex > 0 && pageScroll) {
          prevIndex = pageIndex;
          pageIndex --;
          srcollToPage(pageIndex, prevIndex)
        } else if(pageIndex <= 0) {
          pageIndex = 0
        }
      }
    
      // 下滑
      function scrollDown() {
        if(pageIndex < fullPageItems.length - 1 && pageScroll) {
          prevIndex = pageIndex;
          pageIndex ++;
          srcollToPage(pageIndex, prevIndex)
        } else if(pageIndex >= fullPageItems.length - 1) {
          pageIndex = fullPageItems.length - 1
        }
      }
    
      // 滾動到對應頁
      function srcollToPage(pageIndex, prevIndex) {
        fullPage.style.top = - pageIndex * 100 + "%";
        fullPage.style.transition = `all ease-in ${(Math.abs(pageIndex - prevIndex) - 1)/2 + .3}s`
        sliderTabSelect(pageIndex)
        pageScroll = false
        scrollTimer()
        if(pageIndex == sliderTabItems.length -1) {
          nextPage.style.opacity = "0"
        } else {
          nextPage.style.opacity = "1"
        }
      }
    
      // 定時器 解決函數連續執行
      function scrollTimer() {
        setTimeout(function() {
          pageScroll = true
        }, 500)
      }
    
      // 頁面滾動，導航對應變化
      function sliderTabSelect(index) {
        for(let i = 0; i < sliderTabDivs.length; i ++) {
          sliderTabDivs[i].classList.remove("active");
          sliderTabImgs[i].classList.remove("select");
        }
        sliderTabDivs[index].classList.add("active");
        sliderTabImgs[index].classList.add("select")
      }
    
      // 點擊導航，頁面滾動
      function sliderTabClick() {
        for(let i = 0; i < sliderTabItems.length; i ++) {
          sliderTabItems[i].onclick = function () {
            if(i > pageIndex) {
              fullPage.style.top = - (i - 1) * 100 + "%";
            } else {
              fullPage.style.top = - (i + 1) * 100 + "%";
            }
            srcollToPage(i, pageIndex)
            pageIndex = i
          }
        }
      }
    }

html部分--index.html

css部分--index.css

    /* 容器 */
    .container {
      width: 100%;
      height: 100vh;
      overflow: hidden;
      position: relative;
    }
    
    /* 全屏滾動容器 */
    .full_page {
      width: 100%;
      height: 500%;
      /* overflow: hidden; */
      position: absolute;
      top: 0;
      left: 0;
    }
    
    .full_page_item {
      width: 100%;
      height: 20%;
      position: relative;
    }
    
    .home {
      background: url(../img/bg.png) #87b0a5;
    }
    
    .info {
      background: url(../img/bg.png) #109085;
    }
    
    .skill {
      background: url(../img/bg.png) #a29971;
    }
    
    .project {
      background: url(../img/bg.png) #788990;
    }
    
    .contact {
      background: url(../img/bg.png) #999;
    }
   
    /* 全屏滾動tab */
    .slider_tab {
      position: fixed;
      top: 50%;
      right: 30px;
      margin-top: -150px;
    }
    
    .slider_tab li {
      width: 50px;
      height: 50px;
      margin-bottom: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }
    
    .slider_tab li div {
      width: 15px;
      height: 15px;
      background: #f0f0f0;
      border-radius: 50%;
    }
    
    .slider_tab li div.active {
      width: 50px;
      height: 50px;
      background: #666;
      transition: all .3s;
    }
    
    .slider_tab li div img {
      width: 60%;
      height: 60%;
      padding-top: 20%;
      padding-left: 20%;
      display: none;
    }
    
    .slider_tab li div img.select {
      display: block;
    }
    
    /* 下一頁 */
    .next_page {
      width: 30px;
      height: 30px;
      position: fixed;
      left: 50%;
      margin-left: -15px;
      cursor: pointer;
      animation:jump .8s infinite;
      -moz-animation:jump .8s infinite; /* Firefox */
      -webkit-animation:jump .8s infinite; /* Safari and Chrome */
      -o-animation:jump .8s infinite; /* Opera */
    }
    
    .next_page img { 
      width: 100%;
    }
    
    @keyframes jump
    {
      0% {bottom:70px;}
      100% {bottom:55px;}
    }
    
    @-moz-keyframes jump /* Firefox */
    {
      0% {bottom:70px;}
      100% {bottom:55px;}
    }
    
    @-webkit-keyframes jump /* Safari 和 Chrome */
    {
      0% {bottom:70px;}
      100% {bottom:55px;}
    }
    
    @-o-keyframes jump /* Opera */
    {
      0% {bottom:70px;}
      100% {bottom:55px;}
    }

js部分--index.js

    window.onload = function() {
      fullPage()
    }

圖片

云服務器 GPU云服務器原生js滾輪滾動原生js實現 js實現瀏覽器全屏 ajax原生js實現

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/101526.html

在全屏滾動頁面下實現鼠標滾輪的子級交互

摘要：由此，我們可以完全屏蔽的默認滾動觸發，改用方法控制全屏滾動，解除了全屏滾動與鼠標滾輪事件的強耦合。此外，通過定時器延時秒設置的值，將用戶的鼠標滾輪操作強制分為兩步，最終實現了目的。需求分析剛進公司產品提出一個需求：在全屏頁面中滾動鼠標滾輪更新文本，回滾再恢復原文本，同時不影響全屏頁面的正常切換：初始狀態 showImg(https://segmentfault.com/img/b...

godiscoder 2019-08-19 17:18 評論0 收藏0
AlloyTouch全屏滾動插件發布--30秒搞定順滑H5頁

原文鏈接：https://github.com/AlloyTeam/AlloyTouch/wiki/AlloyTouch-FullPage-Plugin 先驗貨 showImg(https://segmentfault.com/img/remote/1460000007885626?w=280&h=280); 插件代碼可以在這里找到。注意，雖然是掃碼體驗，但是AlloyTouch.FullPag...

_ivan 2019-08-21 11:21 評論0 收藏0
實現小小的fullpage

摘要：也嘗試了這個方案，選擇毫秒效果相對最佳。方案繼續思考一開始的思路為啥出現問題。經過老大提醒，并結合千牛之前出現的動畫問題，感覺是動畫結束和控制沒有達到一致。除了過渡有且只有事件，動畫開始，動畫結束事件，動畫重復運動事件。需求背景今天運營給了一個需求，要做個引導頁，也就是全屏滾動。考慮到只有3張圖，就自己碼個吧！說干就干。思路設置一個外層container, 用戶的可見區域，也...

hosition 2019-08-21 14:05 評論0 收藏0
用 ES6 寫全屏滾動插件

摘要：這篇文章將介紹如何使用原生主要使用語法實現全屏滾動插件，兼容手機觸屏，觸摸板優化，支持自定義頁面動畫，壓縮后文件只有。這篇文章將介紹如何使用原生 JS （主要使用 ES6 語法）實現全屏滾動插件，兼容 IE 10+、手機觸屏，Mac 觸摸板優化，支持自定義頁面動畫，壓縮后 gzip 文件只有 2.15KB。完整源碼在這 pure-full-page，點這查看 demo。 1）前面的話...

liuchengxu 2019-08-26 11:52 評論0 收藏0