我想在我的网站udowalzfinal.umatechcorner.com上引入像hugeinc.com这样的效果
我做了以下
$(window).on({
'DOMMouseScroll mousewheel': ScrollBegin
});
var delta = 0;
var scrollThreshold = 10;
function ScrollBegin(e) {
// --- Scrolling up ---
if (e.originalEvent.detail < 0 || e.originalEvent.wheelDelta > 0) {
delta--;
console.log(delta);
if ( Math.abs(delta) >= scrollThreshold) {
timer = setTimeout(function () {
MoveScreen('up');
}, 800);
clearTimeout(timer);
}
}
// --- Scrolling down ---
else {
delta++;
console.log(delta);
if (delta >= scrollThreshold) {
timer = setTimeout(function () {
MoveScreen('down');
clearTimeout(timer);
}, 800);
}
}
// Prevent page from scrolling
return false;
}
我不知道要为scrollThreshold设置什么值。
鼠标轮事件被提升&amp; ScrollBegin被执行。但在IE和IE中这太慢了使用Apple Mouse在Safari中过快。
每次鼠标滚轮移动都会引发鼠标滚轮事件。就我而言,当我滚动鼠标滚轮一次时,它会将事件提升10次。如何禁用这9个事件并仅处理一次。
How to get a MouseWheel Event to fire only once in jQuery?文章无法解决我的问题。这只能支持一次和一次上升。然后下来一次。但我的页面中有5张幻灯片。
有人可以帮忙吗?
答案 0 :(得分:1)
你想看看Underscore.js的Debounce功能。你可以直接使用debounce将下划线带到你的页面上(不是一个坏主意),或者自己实现它。还有油门,它的工作方式略有不同;这是两个例子:
答案 1 :(得分:0)
您应该使用debouncer
。
//Debouncer functions add a delay between an event and a reaction, so scaling and scrolling don't evoke a function dozens of times.
function debouncer(func, timeout) {
var timeoutID , timeout = timeout || 200;
return function () {
var scope = this , args = arguments;
clearTimeout( timeoutID );
timeoutID = setTimeout( function () {
func.apply( scope , Array.prototype.slice.call( args ) );
} , timeout );
};
}
这是一个通用功能。像这样使用它:
jQuery(window).scroll(debouncer(function(){
//Call your scroll handler here.
}));
要真正微调延迟,请添加一个秒参数,例如:
jQuery(window).scroll(debouncer(function(){
//Call your scroll handler here.
}), 600);