做了一个fullpage，但是在滚动位置方面有点不理解，请前辈们赐教

<!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;
    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<-2){
                num=0;
            }
            oDiv[0].style.marginTop=100*num+"vh";
        }else{
            //向下滚动
            num++;
            if(num>2){
                num=0;
            }
            oDiv[0].style.marginTop=-100*num+"vh";
        }
    }
}

我想做一个当我向下滑到第三个就转到第一个，但是在第一个的时候不可向上滑的效果需要怎么做？就是1-2-3-1-2-3 3-2-1-stop的效果？

向上滚动的时候，marginTop那里也应该是负值，所以将你的counter函数改成下面这样应该就是你想要的效果，不知道我理解得对不对

function counter(count){
        if(count>0){
            //向上滚动
            if(num===0){
                return;
            }
            num--;
        }else{
            //向下滚动
            if(num>=2){
                num=-1;
            }
            num++;
        }
        oDiv[0].style.marginTop=-100*num+"vh";
    }

弄个内部的slide页面呗

【热门文章】