javascript - 向下滑动和向上滑动事件在快速鼠标滚轮上下混合

Question

我使用 jquery slideDown() 和 slideUp() 在滚动条高度大于200px.

问题:

链接滑动操作混合在快速鼠标滚轮上下中。由于 0.4 秒 幻灯片功能的运行时间。我试图定义一个visible flag和complete functions来防止混淆。但没有成功。

JsFiddle

在 result block 中向下滚动以查看链接并尝试快速上下滚动。如果结果 block 在屏幕上的高度很大，请降低高度以查看操作。

impress: function () { 
    if ($(window).scrollTop() > this.MIN_SCROLL_HEIGHT 
        && !this.buttonVisibleFlag) 
    { 
        this.button.slideDown(400, function() {
            Blue.buttonVisibleFlag = true;
        });
    }
    else if ($(window).scrollTop() <= this.MIN_SCROLL_HEIGHT 
             && this.buttonVisibleFlag) 
    {
        this.button.slideUp(400, function() {
            Blue.buttonVisibleFlag = false;
        });
    }
}

任何想法或帮助将不胜感激。

Answer 1

我认为最好的办法是仅在用户停止滚动一段时间后才执行滑动操作。我找到了 this method检测用户何时停止滚动并在您的代码中实现，结果如下:

Updated fiddle

var Blue = {
    MIN_SCROLL_HEIGHT: 200,
    button: null,
    buttonVisibleFlag: null,

    init: function () {
        this.button = $(".gototop");
        this.buttonVisibleFlag = false;
        this.setWindowBindings();
    },
    setWindowBindings: function () {
        $(window).scroll(function () {
            //perform actions only after the user stops scrolling
            clearTimeout($.data(this, 'scrollTimer'));
            $.data(this, 'scrollTimer', setTimeout(function () {
                Blue.impress();
            }, 150));
        });
    },
    impress: function () {
        if ($(window).scrollTop() > this.MIN_SCROLL_HEIGHT) {
            this.button.slideDown();
        } else if ($(window).scrollTop() <= this.MIN_SCROLL_HEIGHT) {
            this.button.slideUp();
        }
    }
}

$(document).ready(function () {
    Blue.init();
});

注意:您可能需要调整超时间隔以满足您的需要