本物の JQuery UI の天才のための 1 つを次に示します。セクションがオンデマンドでロードされる非常に長いフォームがあります (たとえば、インデックス/ナビゲーションがクリックされたとき、または現在のセクションの端近くをスクロールしたときなど)。
現在表示されているセクションの下にセクションをロードすると、これは現在のスクロール (つまり、scrollTop) の位置には影響しませんが、現在表示されているセクションの上に新しいセクションを挿入すると、もちろん表示されているコンテンツが押し下げられます。
現在のセクションに対する scrollTop の位置を維持する必要があります。また、調整が行われている間、ディスプレイのジャンプ/グリッチを避ける必要があります。
検討中のオプション:
- コンテンツをロードし、ロードされたアイテムの高さで scrollTop の位置を調整します (DOM の変更は scrollTop の調整よりもはるかに遅い可能性があるため、これはおそらくひどく不具合を起こすでしょう)。
- 新しいセクションを画面外にロードし、高さを測定します。次に、セクションを挿入し、scrollTop をその量だけ調整します (おそらく DOM の更新のため、まだ問題が発生している可能性があります)。
- ロードするセクションを大きな固定高 (100/1000 ピクセルなど) に設定し、scrollTop を調整して現在のビューが動かないようにします。そのセクションにコンテンツをロードし、実際の新しいコンテンツの高さを測定し、実際の高さに一致するように scrollTop を調整しながら固定の高さを削除します。
- 従来のスクロールは使用せず、独自の相対オフセットを維持し、既存のセクションを離して新しいセクションに合わせて移動するカスタム スクローラーを作成します。問題は、カスタム スクロールバーの置換を作成することになります (使用している nicescroll のようなもの)。
- 現在表示されているセクションの位置を一時的に絶対位置 (画面オフセットから計算された位置) に変更して、フローから外します。その背後にある親のスクロール ウィンドウのコンテンツを更新し、新しい scrollTop を再計算した後、表示されているセクションを再び相対的にします。
- 私たちが考えていない何か他のものはありますか？
実際にこの問題を解決しなければならなかった人からの提案をお願いします。画面が誤動作しないことが重要であるため、scrollTop を低速の DOM 更新に同期することは避ける必要があります。
提案されたソリューションに関する提案やコメントはありますか? すでにこれを行うスクロールの代替品はありますか?
解決できないが、解決する価値があると思われる場合は、賛成票を投じることを検討してください。:)