Question

我正在尝试基于鼠标滚轮进行单页滚动。在鼠标按下时，下面的部分向上移动，鼠标向上移动，上面的部分向下移动。有五个部分，我使用变量'a'，初始值为1，在mousedown a 增量上，并将值作为节的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>

Answer 1

您应该考虑使用fullPage.js。这种效果最完整，最受欢迎的图书馆。

Answer 2

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

以下是实施：https://jsfiddle.net/f9ug3wv5/

基于鼠标滚轮的整页滚动

2 个答案: