Question

我正在开发一个使用虚拟分页的项目。正文设置为overflow: hidden，目前导航页面的唯一方法是通过物理单击导航窗格中的任一链接或向下滚动/向上滚动按钮。以下是物理点击这些元素时触发的事件的概念：

var links = $('#topnav, .top-mid a'), l = links.length - 1;
var id = 0;

$('.scrollDown, .scrollUp, .top-mid a, body.home #topnav').click(function (e) {
    e.preventDefault();
    var $this = $(this);

    if ($this.is('.scrollDown') && id < l) id++;
    if ($this.is('.scrollUp') && id > 0) id--;
    if ($this.is('#topnav, .top-mid a')) id = links.index(this);

    // Body is animated down or up and elements are
    // shown or hidden depending on what was clicked and
    // and what the var id is currently equal to
});

这个想法是在鼠标滚轮事件上只触发一次滚动按钮。所以接近这个简单，但实际上有效：

$(window).on('mousewheel', function(e){ // I realize this will not work in FF

    var evt = e.originalEvent.wheelDelta;
    console.log(evt);

    // Scrolling Down
    if (evt < 0) {
        $('.scrollDown').click(); // This fires recursively as long as wheelDelta !== 0
    }
});

如何强制wheelDelta仅增加或递减1，或者，除非这样，我如何消除点击事件的递归？

我已经有一段时间了，并且阅读了很多帖子并且没有能够破解它。我也尝试了fullPage.js，但由于其他各种原因，它很重，并不适合我的项目。

Answer 1

我终于解决了这个问题，当然事实证明这很简单。这是在click()事件内切换布尔值的问题，但仅在所有动画发生之后。像这样：

var scrolled = false;

$(window).on('mousewheel', function(e){

    var evt = e.originalEvent.wheelDelta;

    // Scrolling Down - Only fire the click event if it hasn't already fired
    if (evt < 0 && !scrolled) {
        $('.scrollDown').click();
    // Scrolling Up
    } else if (evt > 0 && !scrolled) {
        $('.scrollUp').click();
    }
});

// Toggle the scrolled variable inside the original click event
$('.scrollDown, .scrollUp').click(function (e) {

    e.preventDefault();

    var $this = $(this);

    if ($this.is('.scrollDown') && id < l) { 
        id++; 
        scrolled = true; 
        setTimeout(function(){ 
            scrolled = false;
        }, 1500); 
    }
    if ($this.is('.scrollUp') && id > 0) { 
        id--; 
        scrolled = true; 
        setTimeout(function(){ 
            scrolled = false;
        }, 1500); 
    }
    // Other events here
    // The timeout has to be set high enough to assure
    // that the mousewheel event is finished
});

消除鼠标轮事件内触发的事件的递归

1 个答案: