Next.js でのスクロールの復元

3181 ワード
react webdev javascript nextjs テキストリンク
Remotebear に取り組んでいるときに、Next.js がスクロールの復元を自動的に処理しないことを最近発見しました.したがって、たとえば、アプリの前のページに戻ると、Next.js は、アプリを離れたときのスクロール位置に関係なく、常に上にスクロールして表示します.

実験巻物復活フラグ



幸いなことに、Next.js には an experimental scrollRestoration flag があり、スクロール位置を自動的に復元することができます.next.config.js ファイルで次のように有効にできます.

module.exports = {
  experimental: {
    scrollRestoration: true,
  },
};


ネクストルータースクロール



私の使用例では、このソリューションは正常に機能していますが、アプリケーションのスクロールの処理方法を制御する必要がある場合があります.つまり、ユーザーがアプリケーション ページ内を移動しているときにスクロールを復元したい場合がありますが、ページが変更される前または後に、ある種のページ遷移またはその他の機能を使用して追加の作業を行う必要があります.
このような場合は、@moxy/next-router-scroll を試してみることをお勧めします.このパッケージは scroll-behavior の上に構築されており、Next.js ルーター イベントをアクティブにリッスンし、現在の場所に関連付けられたスクロール値をセッション ストレージに書き込み、これらの値を読み取ります. updateScroll() が呼び出されるたびに.

スクロール復元を完全に無効にする



Next.js でスクロール復元が自動的に機能しないことに気付いた矛盾が 1 つあります.デフォルトでは、ナビゲーション ロジックが JavaScript によって処理されている場合、スクロール復元は機能しませんが、ブラウザーによって処理されている場合は正常に機能します (例: on完全に更新するか、JavaScript を無効にしてナビゲートしている間).

そのため、まれにスクロールの復元を完全に無効にしたい場合は、プロジェクトの <head> に次のスニペットを追加することを忘れないでください.

import Head from "next/head";

export default function ScrollRestorationDisabler() {
  return (
    <Head>
      {/* Tell the browser to never restore the scroll position on load */}
      <script
        dangerouslySetInnerHTML={{
          __html: `history.scrollRestoration = "manual"`,
        }}
      />
    </Head>
  );
}
Android P非SDKインタフェース制限
プログラミングは初めてですか? VSCodeをセットアップしましょう