//平滑滚动 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>