php单屏网站源码,关于原生js实现类似fullpage的单页/全屏滚动的方法

这篇文章主要介绍了利用原生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中文网！

相关推荐：