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 の他の関連記事に注目してください。