Ajax を使用したコンテンツの生成 - ID までスクロールできない

Question

ajax 経由で取得したデータに基づいてページ コンテンツを生成します。 私が抱えている問題は、特定の ID までスクロールしたいときに、スクロールが起こらないか、間違った場所にスクロールしてしまうことです。

SO Q&A を見てきましたが、良い解決策が見つかりませんでした。多くの答えは Angular または React に関するものですが、プレーンな JS については本当に確かなものはありません。

たとえば、ユーザーがリンク「会社概要 -> プロジェクト」をクリックしたとします。「会社概要」がページであり、プロジェクトはページの最後にある ID にあり、コンテンツが含まれているとします。

別のページからリンクをクリックすると問題が発生します。

ホームページにアクセスしていると仮定して、会社概要ページのプロジェクト セクション (id project) へのリンクをクリックします。これは、スクロールが期待どおりに動作しない場合です。 「会社概要」ページに移動したときにリンクされた項目をクリックすると、この問題は発生しません。

ページ データは JavaScript でレンダリングされるため、イベント リスナー

DOMContentLoaded または load はコンテンツが生成される前に起動されるため、使用できません (おそらく)。

以下は、機能しない私の解決策です。 ID がビューポート内にあるかどうかを確認し、そうでない場合はスクロールする必要があります。

setTimeout

は常に機能するとは限らないため、使用したくありません (インターネット速度が遅い、コンテンツ (画像) が多いなど) ご協力いただければ幸いです。

リーリー

追加データを提供できる場合は、お知らせください。

Answer 1

ただし、これはこれまでのところ最もエレガントなソリューションではありません。

誰かがより良い方法を見つけたら、私に知らせてください。

編集: ユーザーがスクロールした後でもプログラムによるスクロールの問題を解決するために、コードをわずかに変更しました。

リーリー