极客观点
项目管理
HarmonyOS
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<title>DEMO</title>
<style>
body,div{margin:0;padding:0;}
#Delta{overflow:hidden;width:100vw;height:100vh;}
#Delta div{width:100vw;height:100vh;}
#Delta div:nth-child(1){background-color:#f00;}
#Delta div:nth-child(2){background-color:#0f0;}
#Delta div:nth-child(3){background-color:#00f;}
</style>
</head>
<body>
<div id="Delta">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<script src="wheel.js"></script>
<script>
</script>
</body>
</html>var eventUtil={
addHandler:function(element,type,handler){
if(element.addEventListener){
element.addEventListener(type,handler,false);
}else if(element.attachEvent){
element.attachEvent('on'+type,handler);
}else{
element['on'+type]=handler;
}
},
removeHandler:function(element,type,handler){
if(element.removeEventListener){
element.removeEventListener(type,handler,false);
}else if(element.detachEvent){
element.detachEvent('on'+type,handler);
}else{
element['on'+type]=null;
}
}
}
window.onload=function(){
var oDelta=document.getElementById('Delta');
var oDiv=oDelta.getElementsByTagName("div");
var timer=null;
var num=0;
var n=0;
eventUtil.addHandler(oDelta,'mousewheel',fullpage);
function fullpage(){
var e=e||window.event;
var down=null;
if(e.wheelDelta){
down=e.wheelDelta;//IE,Chrome
}else{
down=-e.detail;//FF
}
counter(down);
}
function counter(count){
if(count>0){
//向上滚动
num--;
if(num<0){
num=0;
}
oDiv[0].style.marginTop=-100*num+"vh";
/*console.log(oDiv[0].style.marginTop)
timer=setInterval(function(){
n--;
console.log(n);
if(n<=-100){
clearInterval(timer);
n=0;
};
},50)*/
}else{
//向下滚动
num++;
if(num>2){
num=2;
}
oDiv[0].style.marginTop=-100*num+"vh";
/*console.log(oDiv[0].style.marginTop)*/
}
}
}是这样的，我想做一个鼠标滚动，当我往下或者是往上滚的时候，页面能够匀速上升或下降。滚一次，移动一个页面距离。当我到达第一个DIV就停止往上滚或最后一个DIV的时候就停止往下滚，请问这该怎么实现？
