這篇文章主要介紹了利用原生js實現類似fullpage的全屏滾動的實現方法，文中給出了完整的實例代碼，相信對大家的理解和學習具有一定的參考價值，需要的朋友們可以參考借鑒，下面來一起看看吧。

前言

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

css代碼：

html,body {height:100%;}

body {margin:0px;}

p {height:100%;}

html代碼:

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;

};

});

以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！

相關推薦：

總結

以上是生活随笔為你收集整理的php单屏网站源码,关于原生js实现类似fullpage的单页/全屏滚动的方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。