<!DOCTYPE html> <style> html,body {height:100%;} body {margin:0px;} div {height:100%;} </style> <body> <script> addEventListener("DOMContentLoaded",function(){ var body=document.body,html=document.documentElement; var itv,height=document.body.offsetHeight; var page=scrollTop()/height|0; //窗口大小改變事件 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> <div style="background:#FEE;"></div> <div style="background:#EFE;"></div> <div style="background:#EEF;"></div>
友情鏈接