1

我有一个单页网站，它使用内部锚点来产生多页的错觉。我编写了一个 javascript 函数，该函数从用户向上/向下读取鼠标滚轮，并基于此将用户发送到当前页面上方/下方的锚点。该功能如所述正常工作，但是鼠标滚轮非常敏感，以至于最轻微的移动将触发多个鼠标滚轮事件并向用户发送多个页面向上/向下而不是一个。

我需要一种方法来限制我的鼠标滚轮功能可以执行多少次，以便用户只在鼠标滚轮上的任一方向移动一页，而不管使用鼠标滚轮的快/慢。我的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>
4

2 回答 2

0

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

于 2012-10-29T14:59:13.820 回答
0

除了直接在鼠标滚轮上转到页面的一部分，您可以设置一个非常短的时间setTimeout（例如 50 毫秒左右）去您想去的地方，如下所示：

case "#home":
    var timeout = null;
    timeout = setTimeout('window.location = $("#menu-item-106 a").attr("href")', 50);
    break;

这样，如果快速连续发生 20 个鼠标滚轮事件，您只需触发一次您想要执行的操作。

于 2012-10-29T14:45:26.643 回答