スクロール位置の調整

FE開発するとスクロール位置が思ったところに行かないことがある。

その場合には、app/router.optionsでscrollBehaviorを使用して、スクロール位置をカスタマイズできる

https://nuxt.com/docs/guide/going-further/custom-routing#using-approuteroptions

import type { RouterOptions } from '@nuxt/schema
  export default <RouterOptions> {
    scrollBehavior(to, from, savedPosition) {
      if (savedPosition) {
        return savedPosition
      } else {
       return {
         top: 0,
         behavior: 'smooth',
       }
  }
}

＜使用箇所＞

下記のようなことを開発したい場合に、上記をカスタマイズすることで、実現できる！

・ページ遷移時に画面の先頭にスクロール

・ブラウザバックした際に、スクロール位置を戻す（※１）

・特定のページのみスクロールの位置を変えたい時

※１ ページ遷移時に、セッションStrageにスクロール位置を保存し、ブラウザバック時に、onMoutedで保存したスクロール位置取得し、設定

The following two tabs change content below.

• この記事を書いた人
• 最新の記事

有村

フリーランスのシステムエンジニアしてます。

最新記事 by 有村 (全て見る)

• Nuxt3でスクロール位置 - 2024年4月25日
• nuxt2→3の移行時にエラー解消 - 2024年4月1日
• 動画の署名付URL - 2024年2月1日