<!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的时候就停止往下滚，请问这该怎么实现？
<script>
window.onload=function(){
var oDelta=document.getElementById('Delta');
var oDiv=oDelta.getElementsByTagName("div");
var firstDiv=oDiv[0];
var divisscrolling=false;
var movingValue=0;
var requestAnimationFrameId;
var currentDivFrame=0;
var divFrameLength=oDiv.length;
var wheelTimerID=null;
oDelta.addEventListener("wheel",wheelListener,false);
//控制wheel时间间隔,如果一定时间内没有没有变化
var getScrollDownFlag=(function(){
var scrollDownFlag=false;
return function(deltaYIn){
if(deltaYIn<0){
scrollDownFlag=false;
}else if(deltaYIn>0){
scrollDownFlag=true;
}
return scrollDownFlag;
}
}());
function wheelListener(event){
//使用触控板的话，短时间内会触发大量的wheel事件
clearTimeout(wheelTimerID);
var scrollDownFlag=getScrollDownFlag(event.deltaY);
wheelTimerID=setTimeout(function(){
if(divisscrolling){
event.preventDefault();
return;
}
doWhenWheelEvent(scrollDownFlag);
},100);
}
function doWhenWheelEvent(scrollDownFlag){
console.log(scrollDownFlag,divisscrolling);
if(!divisscrolling&&(currentDivFrame>=0&¤tDivFrame<=divFrameLength-1)){
//console.log(scrollDownFlag,currentDivFrame);
if((scrollDownFlag&¤tDivFrame<divFrameLength-1)
||(!scrollDownFlag&¤tDivFrame>0&¤tDivFrame<=divFrameLength-1)){
divisscrolling=true;
oDelta.removeEventListener("wheel",wheelListener,false);
doScorllAnimation(scrollDownFlag);
}
}
}
function doScorllAnimation(scrollDownFlag){
if(movingValue+10<=100){
movingValue=movingValue+10;
firstDiv.style.marginTop=((currentDivFrame)*100*-1+(movingValue)*(scrollDownFlag?-1:1))+"vh";
requestAnimationFrameId=requestAnimationFrame(doScorllAnimation.bind(null,scrollDownFlag));
}else{
divisscrolling=false;
movingValue=0;
oDelta.addEventListener("wheel",wheelListener,false);
currentDivFrame=currentDivFrame+(scrollDownFlag?1:-1);
}
}
};
</script>