禁用（但仍允许）滚动

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;
 });

- user2749195

---

说实话我不确定。它被放置在$(document).ready(function(){})中。 - user2749195

$(this) 是输入吗？ - gersande

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 作为值，所以它只能工作一次。

这里有一个 可工作的示例，我还添加了一个检查来确保每个滚动事件只执行一次动画。

- omma2289