标签：body function cti back yellow out html 平滑滚动 1.2
//平滑滚动 12.5.24未完
<html>
<style>
*{
padding:0px;
margin:0px;
}
html,body,div{
height:100%;
}
</style>
<body>
<div style=‘background-color:red‘></div>
<div style=‘background-color:blue‘></div>
<div style=‘background-color:green‘></div>
<div style=‘background-color:pink‘></div>
<div style=‘background-color:orange‘></div>
<div style=‘background-color:yellow‘></div>
<div style=‘background-color:black‘></div>
<div style=‘background-color:purple‘></div>
<div style=‘background-color:gray‘></div>
</body>
<script>
var rel=document.querySelectorAll(‘div‘);
var page=0,timer;
document.addEventListener(‘wheel‘,function(e){
clearTimeout(timer)
var delta=e.deltaY>0?1:-1;
page+=delta;
if(page<0){
return page=0;
}
if(page>8){
return page=8;
}
console.log(page)
timer=setTimeout(function(){
var height=rel[page].offsetTop;
var diff=height-document.body.scrollTop;
(function callee(){
diff=diff/1.2|0;
document.body.scrollTop=height-diff;
if(Math.abs(diff)){
timer=setTimeout(callee,16)
}
})()
},100)
})
</script>
</html>
标签：body function cti back yellow out html 平滑滚动 1.2
原文地址：http://www.cnblogs.com/hangsarea/p/6901652.html
