サイトのスクロール中にいくつかの要素を移動する視差サイトを構築しようとしています。しかし、私が使用しているスクロール イベント リスナーを使用する代わりに、ポールアイリッシュによるこの投稿と、スクロール リスナーは少しバグがあると述べたこのビデオrequestAnimationFrameを読んだ後です。私の質問は次のとおりです。
私のファイルはhttp://www.socialbuzz.com.au/index.htmlにあります。ページの一番下までスクロールして、JavaScript から操作されている要素を確認してください。
スクロール イベントで requestAnimationFrame ループをトリガーする必要があります。スクロール イベント自体によって requestAnimationFrame がトリガーされないようにしてください。var scrolling = true; のようなものが必要です。これが発生している間に、スクロール イベントからのイベント データを参照する requestAnimationFrame ループを実行します。終了したら、スクロール イベントをデバウンスしてループをオフにする必要があります。これは雑用ですが、結果はそれだけの価値があります。お役に立てれば。
アニメーションを実行していません。つまり、ユーザーの操作なしに継続的にグラフィックを変更することはありません。ページの操作は、ユーザーがスクロールしたときにのみ発生し、ユーザーがスクロールを停止した後は続行されません。したがって、 を使用する利点はなくrequestAnimationFrame、単純なイベント ハンドラに固執する必要があります。
の目的はrequestAnimationFrame、連続アニメーションに最適な動作を提供することです。その利点はここには当てはまりません。あなたが現在持っているように、ループ内で何もしないループrequestAnimationFrameは、ループの各ステップが何らかの方法でグラフィックを更新する場合に完全に適切ですが、ここではユーザーがスクロールしていないときに何も変わらないため、ループはCPU時間を浪費するだけです.
使用する必要がある場合の例はrequestAnimationFrame、スクロールに意図的に遅れて、しばらくすると追いつく要素がある場合です。キャッチアップ アニメーションはrequestAnimationFrame、スクロール イベント ハンドラーから開始されるループで実行する必要があります。キャッチアップが終了すると、そのループは停止する必要があります。
私も同様の経験をしており、マウスムーブリスナーを何度も試しsetInterval、アニメーションステップの頻度を増やすためにonscroll、FF10とFF15でうまく機能していることを確認しました。
たぶん私の要件はあなたの要件と同じではありません-それはスクロールバーを追跡する要素なので、onscrollはボックスの位置を変更するための手がかりでした。FFでは遅れてぎくしゃくしていましたが、WebKitとIEでは問題なく動作しました。私が見つけたのはonscroll、FFではChrome/IEほど頻繁には発火しなかったということです。
私が最初にこれを試したとき、それはFF5または6にありました。マウス移動リスナーまたは頻繁な間隔を使用して、ハンドルスクロール関数が呼び出される頻度を増やすことができましたが、これは実際には、ポジショニングが途切れ途切れに見える効果がありました。onscrollを使用するだけで、10 ESRと15で機能しているようです。おそらく、何かが修正されました。