我正在使用流行的mousewheel插件来模拟像这个网站一样的全屏滚动效果。
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();
});
});
它的表现很好,但当使用触摸板时却不行。使用触摸板时,无论我尝试多慢地滚动,它都会直接滚动到页面底部。