我使用 jquery slideDown()
和 slideUp()
在滚动条高度大于200px
.
问题:
链接滑动操作混合在快速鼠标滚轮上下
中。由于 0.4 秒
幻灯片功能的运行时间。我试图定义一个visible flag
和complete functions
来防止混淆。但没有成功。
在 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;
});
}
}
任何想法或帮助将不胜感激。
最佳答案
我认为最好的办法是仅在用户停止滚动一段时间后才执行滑动操作。我找到了 this method检测用户何时停止滚动并在您的代码中实现,结果如下:
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();
});
注意:您可能需要调整超时间隔以满足您的需要
关于javascript - 向下滑动和向上滑动事件在快速鼠标滚轮上下混合,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18496606/