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

html,body {height:100%;}

body {margin:0px;}

div {height:100%;}

document.addEventListener("DOMContentLoaded",function() {

 varbody = document.body,

 html = document.documentElement;

 varitv, height = document.body.offsetHeight;

 varpage = scrollTop() / height | 0;

 //窗口大小改变事件

 addEventListener("resize", onresize,false);

 onresize();

 //滚轮事件

 document.body.addEventListener(

 "onwheel"indocument ?"wheel":"mousewheel",

 function(e) {

  clearTimeout(itv);

  itv = setTimeout(function() {

  vardelta = e.wheelDelta / 120 || -e.deltaY / 3;

  page -= delta;

  varmax = (document.body.scrollHeight / height | 0) - 1;

  if(page < 0)returnpage = 0;

  if(page > max)returnpage = max;

  move();

  }, 100);

  e.preventDefault();

 }

 );

 //平滑滚动

 functionmove() {

 varvalue = height * page;

 vardiff = scrollTop() - value;

 (functioncallee() {

  diff = diff / 1.2 | 0;

  scrollTop(value + diff);

  if(diff) itv = setTimeout(callee, 16);

 })();

 };

 //resize事件

 functiononresize() {

 height = body.offsetHeight;

 move();

 };

 //获取或设置scrollTop

 functionscrollTop(v) {

 if(v ==null)returnMath.max(body.scrollTop, html.scrollTop);

 elsebody.scrollTop = html.scrollTop = v;

 };

});