原生js实现类似fullpage的单页/全屏滚动
编程学习 2021-07-04 19:20www.dzhlxh.cn编程入门
这篇文章主要介绍了利用原生js实现类似fullpage的全屏滚动的实现方法，文中给出了完整的实例代码，相信对大家的理解和学习具有一定的参考价值，需要的朋友们可以参考借鉴，狼蚁网站SEO优化来一起看看吧。
前言
单页/全屏滚动页面越来越常见了，它多用于产品介绍、招聘等内容较少的简单页面。针对这种效果也出现了不少 jQuery 插件，本文实现的效果类似于fullpage的单屏滚动，使用原生JS实现，不依赖任何js库；
css代码：
html,body {height:100%;}
body {margin:0px;}
div {height:100%;}
html代码:
<div style="background:#FEE;"></div> <div style="background:#EFE;"></div> <div style="background:#EEF;"></div> <div style="background:red;"></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;
};
});
在线演示请点击：
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。