原生js如果實現類似fullpage的單頁/全屏滾動效果

小編給大家分享一下原生js如果實現類似fullpage的單頁/全屏滾動效果，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

前言

單頁/全屏滾動頁面越來越常見了，它多用于產品介紹、招聘等內容較少的簡單頁面。針對這種效果也出現了不少 jQuery 插件，本文實現的效果類似于fullpage的單屏滾動，使用原生JS實現，不依賴任何js庫；

css代碼：

html,body {height:100%;}
body {margin:0px;}
div {height:100%;}

html代碼:

<div ></div>
<div ></div>
<div ></div>
<div ></div>

js代碼:

document.addEventListener("DOMContentLoaded", function() {
 var body = document.body,
 html = document.documentElement;
 var itv, height = document.body.offsetHeight;
 var page = scrollTop() / height | 0;
 //窗口大小改變事件
 addEventListener("resize", onresize, false);
 onresize();
 //滾輪事件
 document.body.addEventListener(
 "onwheel" in document ? "wheel" : "mousewheel",
 function(e) {
  clearTimeout(itv);
  itv = setTimeout(function() {
  var delta = e.wheelDelta / 120 || -e.deltaY / 3;
  page -= delta;
  var max = (document.body.scrollHeight / height | 0) - 1;
  if (page < 0) return page = 0;
  if (page > max) return page = max;
  move();
  }, 100);
  e.preventDefault();
 }
 );
 //平滑滾動
 function move() {
 var value = height * page;
 var diff = scrollTop() - value;
 (function callee() {
  diff = diff / 1.2 | 0;
  scrollTop(value + diff);
  if (diff) itv = setTimeout(callee, 16);
 })();
 };
 //resize事件
 function onresize() {
 height = body.offsetHeight;
 move();
 };
 //獲取或設置scrollTop
 function scrollTop(v) {
 if (v == null) return Math.max(body.scrollTop, html.scrollTop);
 else body.scrollTop = html.scrollTop = v;
 };
});

以上是“原生js如果實現類似fullpage的單頁/全屏滾動效果”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！