vue3 のストアを使用してスクロール位置を記録する例

vue3 のストアを使用してスクロール位置を記録する例

全体的な効果

ホームページリストをスクロールして詳細ページに入ると、ホームページに戻ったときに以前に閲覧した場所に戻ることができます。

コンテナのスクロールイベントをリッスンする

スクロール イベントを定義し、それをコンテナーのスクロール イベントにバインドします。ここではいくつかの調整を行いました。

定数savePosY = () => {
      if(state.timer) 戻り値;
      state.timer = setTimeout(() => {
        ノードを document.querySelector(".contentWrapper"); にします。
        //スクロール位置を記録するstore.commit("setY",node.scrollTop)
        状態.タイマー = null;
        タイムアウトをクリアします(state.timer);
      },100)

イベントをバインドするためにコンテナをマウントする

マウント時(() => {
    contentWrapper を document.querySelector(".contentWrapper"); とします。
    contentWrapper.addEventListener("スクロール",savePosY);
})

ストア内の構成

ストアは比較的単純で、1つの状態yと突然変異setYのみを含みます。

エクスポートデフォルト{
    州:{
         年:0
    },
    突然変異:
        setY(状態,値){
            状態.y = 値;
        }
    }
}

ページが戻るときのスクロール位置を取得する

また、onMountedで操作しないとコンテナ要素を取得できず、VueのDOMは非同期でレンダリングされるため、有効にするにはnextTickで操作する必要があります。

nextTick(() => { contentWrapper.scrollTop = store.state.y; })

やっと

上記がこの記事の全内容です。何か間違っている点やより良い方法があれば、ぜひご意見をお寄せください。

上記は、vue3 が store を使用してスクロール位置を記録する例の詳細です。vue でスクロール位置を記録する方法の詳細については、123WORDPRESS.COM の他の関連記事に注目してください。

以下もご興味があるかもしれません:
  • Vueのキープアライブはリフレッシュせずにスクロール位置を保持します
  • Vueがスクロール位置を設定できない問題を解決する
  • Vue で詳細ページに入るときにスクロール位置を記憶する方法 (キープアライブ)
  • vue2.0 ルート切り替え後にページスクロール位置が変わらないバグの解決方法
  • Vue スクローラーはスクロール位置を記憶するためにページを返します。サンプルコード
  • スクロール位置を記録するための vue-scroller サンプルコード
  • Vueページの固定スクロール位置の問題を解決する方法

<<:  MySQLにログインする際のエラー「ERROR 1045 (28000)」を解決する方法

>>:  Docker コンテナのログを表示およびクリーンアップする方法 (テスト済みで効果的)

推薦する

DockerでPrometheusをインストールする詳細なチュートリアル

目次1. Node Exporterをインストールする2. cAdvisorをインストールする3. ...

JavaScript のよりエレガントなエラー処理方法 async await

目次背景なぜエラー処理が必要なのでしょうか? async await より適切なエラー処理まとめ要約...

MySQLデータベースのストアドプロシージャとトランザクションの違い

トランザクションは、複数の SQL ステートメントの原子性、つまり、それらが一緒に完了するか、一緒に...

Vue ローカルコンポーネントデータ共有 Vue.observable() の使用

コンポーネントが詳細になるにつれて、複数のコンポーネントが状態を共有する状況に遭遇するでしょう。Vu...

Windows 10 システムで nginx ファイル サーバーを構成するためのグラフィック チュートリアル

Nginx の公式 Web サイトから Windows バージョンの Nginx をダウンロードしま...

Vue カードスタイルのクリックして切り替える画像コンポーネントの使用方法の詳細な説明

この記事では、vueカードスタイルのクリックして切り替える画像コンポーネントを参考までに紹介します。...

Win7 x64 に解凍版の mysql 5.7.18 winx64 をインストールするとサービスが起動できない問題を解決します

今日、mysql の公式サイトから mysql-5.7.18-winx64.zip をダウンロードし...

MySQL 4 データをインポートする方法

1. mysqlコマンドをインポートするmysql コマンドのインポート構文は次のとおりです。 my...

Docker コンテナ アプリケーションで避けるべき 10 の悪い習慣

コンテナが企業の IT インフラストラクチャに欠かせない要素となっていることは間違いありません。コン...

Linux でのソース パッケージ インストールのサービス管理

目次1. ソースパッケージサービスの起動管理2. ソースパッケージサービスのセルフスタート管理3. ...

HTML フォームタグチュートリアル (2):

このチュートリアルでは、ウェブデザインにおけるFORMフォームタグのさまざまな属性の応用を紹介します...

CSS でよく使用されるフォントサイズ、フォント単位、行の高さの詳細な説明

px(ピクセル)ピクセルという言葉は皆さんもよくご存知だと思います。次に、この単位に関するちょっとし...

MySQL トランザクション、分離レベル、ロックの使用例の分析

この記事では、例を使用して、MySQL トランザクション、分離レベル、およびロックの使用について説明...

(MariaDB) MySQL のデータ型とストレージメカニズムの包括的な説明

1.1 データ型の概要データ型は、各フィールドに保存できるデータの種類、保存できるデータの量、保存で...

CSS を使用して物流の進行状況のスタイルを実装するためのサンプルコード

効果: CSS スタイル: <スタイル タイプ="text/css">...