当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 原生js实现类似fullpage的单页/全屏滚动

原生js实现类似fullpage的单页/全屏滚动

2019年03月28日  | 移动技术网IT编程  | 我要评论

前言

单页/全屏滚动页面越来越常见了，它多用于产品介绍、招聘等内容较少的简单页面。针对这种效果也出现了不少 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;
 };
});

在线演示请点击：

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网