Javascript 基于鼠标滚轮的全页滚动_Javascript_Jquery_Html

Javascript 基于鼠标滚轮的全页滚动

javascript jquery html

Javascript 基于鼠标滚轮的全页滚动,javascript,jquery,html,Javascript,Jquery,Html,我正在尝试基于鼠标滚轮进行一页滚动。鼠标向下时，下面的部分向上移动；鼠标向上时，上面的部分向下移动。共有五个部分，我使用变量“a”，初始值为1，在鼠标向下移动时，a递增并将值作为部分的id发送（例如：a=2，document.getElementbyId（a）应调用部分2）。这是预期的结果。截面高度：100vh；边框：1px纯黑；} .pushupsections{ 边缘底部：-100vh； } 1. 2. 3. 4. 5. $（文档）.ready（函数（）{ var a=1； $

我正在尝试基于鼠标滚轮进行一页滚动。鼠标向下时，下面的部分向上移动；鼠标向上时，上面的部分向下移动。共有五个部分，我使用变量“a”，初始值为1，在鼠标向下移动时，a递增并将值作为部分的id发送（例如：a=2，

document.getElementbyId（a）

应调用部分2）。这是预期的结果。


截面高度：100vh；
边框：1px纯黑；}
.pushupsections{
边缘底部：-100vh；
}   
1.
2.
3.
4.
5.
$（文档）.ready（函数（）{
var a=1；
$（'body'）.bind（'mouseweell'，函数（e）{
//变量e；
如果（例如原始事件车轮增量/120>0）{
//警报（1）；
如果（a>1）{
a——；
//$（a）.addClass（“pushupsections”）；
//document.getElementById（a）.addclass（“pushupsections”）；
}
}
否则{
如果（a，您可以将节的宽度和高度设置为100%
，并将其位置设置为fixed
。对于节的容器集overflow:hidden

这里是实现：
你应该考虑使用。
这种效果最完整、最受欢迎的库。感谢您提供的解决方案。但我所看到的效果如www.thepedesign.com/demos/onepage\u scroll\u demo.htm所示
<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>