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"あり"-=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。

これが機能するフィドルです。スクロールイベントごとに1つのアニメーションのみを実行するチェックも追加しました

于 2013-09-05T05:09:52.540 に答える