全页滚动基于鼠标轮

我正在尝试根据鼠标轮滚动一页滚动。在鼠标向下时，下面的部分向上和鼠标上移动，上面的部分向下移动。有五个部分，我在Mousedown a 增量上使用的变量'a'，并将值作为ID发送为ID(例如：a = 2，document.getElementbyId(a)，都应调用该部分2(。这是预期的结果。

<head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>   
<style>
 section { height: 100vh;
 border:1px solid black; }
 .pushupsections{
     margin-bottom:-100vh;
 }   
</style>
</head>
<body>
<section id=1>1</section> 
<section id="2">2</section>
<section id="3">3</section>
<section id="4">4</section>
<section id="5">5</section>
<script>
$( document ).ready(function() {
var a=1;
 $('body').bind('mousewheel', function(e){
// var e;
    if(e.originalEvent.wheelDelta /120 > 0) {
        // alert(1);
        if(a>1){               
        a--;
         //$(a).addClass("pushupsections");
        // document.getElementById( a ).addclass("pushupsections");
        }
     }
    else{          
        if(a<5){
        a++;
            //   document.getElementById( a ).addclass("pushupsections");
            }        
    }
});
}); 
</script>
</body>
</html>

您应该考虑使用fullpage.js。这种效果最完整，最受欢迎的库。

您可以将部分的宽度和高度设置为100%，并将其位置设置为fixed。对于该部分的容器集overflow: hidden。

这是实现：https：//jsfiddle.net/f9ug3wv5/

相关内容

最新更新

热门标签：