一次滚一屏
Posted hngbk
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了一次滚一屏相关的知识，希望对你有一定的参考价值。
//demo
<style>
html,body {height:100%;}
body {margin:0px;}
div {height:100%;}
</style>
<body>
<div style="background:red;"></div>
<div style="background:yellow;"></div>
<div style="background:orange;"></div>
</body>
<script>
addEventListener("DOMContentLoaded",function(){
var body=document.body,html=document.documentElement;
var itv,height=document.body.offsetHeight;
//var page=scrollTop()/height|0;//取整
var page=parseInt(scrollTop()/height);
//窗口大小改变事件
addEventListener("resize",onresize)//,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;
};
});
</script>
以上是关于一次滚一屏的主要内容，如果未能解决你的问题，请参考以下文章