我用的是流行的鼠标滚轮 https://github.com/brandonaaron/jquery-mousewheel插件来模拟全页滚动,例如这个网站 http://onlinedepartment.nl/#values.
jQuery(function() {
var top = 0,
viewport = jQuery(window).height(),
step = jQuery(".home .l-section:first").outerHeight(),
body = jQuery.browser.webkit ? jQuery('body') : jQuery('html'),
wheel = false;
jQuery('body').mousewheel(function(event, delta) {
wheel = true;
if (delta < 0) {
top = (top + viewport) >= jQuery(document).height() ? top : top += step;
body.stop().animate({
scrollTop: top
}, 400, function() {
wheel = false;
});
} else {
top = top <= 0 ? 0 : top -= step;
body.stop().animate({
scrollTop: top
}, 400, function() {
wheel = false;
});
}
return false;
});
jQuery(window).on('resize', function(e) {
viewport = jQuery(window).height();
step = jQuery(".home .l-section:first").outerHeight();
});
jQuery(window).on('scroll', function(e) {
if (!wheel) top = jQuery(this).scrollTop();
});
});
它工作得很好,但在使用触控板时却不行。使用触控板,无论我滚动的速度有多慢,它都会滚动到页面底部。
与我的笔记本电脑的触控板配合良好。但是,这是已知问题,您尝试过使用去抖吗?
function mouseHandle(event) {
newDate = new Date();
var scrollAllowed = true;
if( wheel < 10 && (newDate.getTime()-oldDate.getTime()) < 100 ) {
scrollPos -= event.deltaY*(10-wheel);
wheel++;
}
else {
if( (newDate.getTime()-oldDate.getTime()) > 100 ) {
wheel = 0;
scrollPos -= event.deltaY*60;
}
else {
scrollAllowed = false;
}
}
oldDate = new Date();
if( scrollAllowed ) {
// do your stuff here
}
}
//Apply this effect with jQuery On event
$('body').on('mousewheel', function(event) { mouseHandle(event); });
这里已经报告了这个问题:https://github.com/brandonaaron/jquery-mousewheel/issues/36 https://github.com/brandonaaron/jquery-mousewheel/issues/36
您将在那里获得多种解决方案。希望有帮助。帮助自己:-)
Peace,
Rahul
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)