Javascript 将函数绑定(bind)到鼠标滚轮

Question

我有一个单页网站，它使用内部 anchor 来给出多个页面的错觉。我编写了一个 JavaScript 函数，它从用户那里读取向上/向下的鼠标滚轮，并基于此将用户发送到当前页面上方/下方的 anchor 。该功能按照描述正常工作，但是鼠标滚轮非常敏感，最轻微的移动就会触发多个鼠标滚轮事件，并向用户发送多个向上/向下页面，而不是一页。

我需要一种方法来限制鼠标滚轮功能可以执行的次数，以便用户仅在鼠标滚轮上的任一方向上移动一页，而不管使用鼠标滚轮的快/慢。我的 JavaScript 如下。

<script>
$(document).ready(function(){
$("#main").bind('mousewheel', function(event) {
if (event.originalEvent.wheelDelta >= 0) {
var currentPage = $(".active").attr('href');
switch(currentPage){
case "#publications":
    window.location = $("#menu-item-290 a").attr('href');
    break;
case "#branding":
    window.location = $("#menu-item-106 a").attr('href');
    break;
case "#website-development":
    window.location = $("#menu-item-110 a").attr('href');
    break;
case "#about-us":
    window.location = $("#menu-item-109 a").attr('href');
    break;
case "#contact":
    window.location = $("#menu-item-108 a").attr('href');
    break;
}

}
else {
var currentPage = $(".active").attr('href');
switch(currentPage){
case "#home":
    window.location = $("#menu-item-106 a").attr('href');
    break;
case "#publications":
    window.location = $("#menu-item-110 a").attr('href');
    break;
case "#branding":
    window.location = $("#menu-item-109 a").attr('href');
    break;
case "#website-development":
    window.location = $("#menu-item-108 a").attr('href');
    break;
case "#about-us":
    window.location = $("#menu-item-107 a").attr('href');
    break;
}

}
 });
});
</script>

Answer 1

您已经在查询 wheelDelta，那么为什么不使用它呢？ According to MSDN它“表示车轮旋转的距离，以 120 的倍数表示”。因此，只需将 if 语句更改为 >= 360 之类的内容，然后将 if 添加到 else 中以表示负数。