网站建设 网站建设技术 网页设计 html/css
js鼠标滚动滑动一屏代码
人浏览 发布时间：2021-10-08
!DOCTYPE html style html, body { height:100%; } body { margin:0px; } div { height:100%; font-size:60; text-align:center } /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(page0)return page=0; if(pagemax)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==nu...
<!DOCTYPE html>
<style>
html, body {
height:100%;
}
body {
margin:0px;
}
div {
height:100%;
font-size:60;
text-align:center
}
</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;">1</div>
<div style="background:#EFE;">2</div>
<div style="background:#EEF;">3</div>
<div style="background:#FEE;">4</div>
<div style="background:#EFE;">5</div>
<div style="background:#EEF;">6</div>
</body>
</html>