Question

当滚动条高度超过slideDown()时，我正在使用jquery slideUp()和gototop来显示固定的200px链接。

问题：

链接幻灯片操作混合在fast mouse wheel up and down中。由于幻灯片功能的0.4 sec运行时间。我尝试定义visible flag和complete functions以防止混音。但没有成功。

向下滚动result 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();
});

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

向下滑动并向上和向下滑动快速鼠标滚轮中混合的事件

1 个答案: