3

我希望在此站点上重新创建滚动效果:misfitwearables.com。到目前为止,我的方法是禁用用户滚动,但仍然检测滚动方向以允许 jQuery 控制页面的滚动方式。问题是它有效(耶!)..但它只适用于第一个卷轴。第一次滚动后,它停止响应。我怎样才能让它在每个滚动上听/响应?

$(this).bind( 'mousewheel', function ( e ) {
 if (e.originalEvent.wheelDelta < 0) {
    // scroll down
    $("html, body").animate({ scrollTop: (+50) }, 900, "easeInOutQuart" );
 } else {
    // scroll up
    $("html, body").animate({ scrollTop: (-50) }, 900, "easeInOutQuart" );
 }
 return false;
 });
4

1 回答 1

1

动画属性值不正确,应该是"+=50"and "-=50"

$(this).bind( 'mousewheel', function ( e ) {
 if (e.originalEvent.wheelDelta < 0) {
    // scroll down
    $("html, body").animate({ scrollTop: "+=50" }, 900, "easeInOutQuart" );
 } else {
    // scroll up
    $("html, body").animate({ scrollTop: "-=50" }, 900, "easeInOutQuart" );
 }
 return false;
});

它只工作一次,因为你总是通过50-50作为价值。

这是一个工作小提琴,我还添加了一个检查,每个滚动事件只执行一个动画

于 2013-09-05T05:09:52.540 回答