Question

我想在这个网站上重新创建滚动效果：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;
 });

Answer 1

动画属性值不正确，应为"+=50"和"-=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作为值传递。

这是一个 working fiddle ，我还添加了一个检查，每个滚动事件只执行一个动画

禁用（但仍允许）滚动

1 个答案: