スクロール位置の調整

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 有村 (全て見る)

• javascriptのオブジェクトのreadonlyの仕方と動作 - 2024年10月31日
• 最近セキュリティインシデントが多い - 2024年7月29日
• スマホのアドレスバー - 2024年5月27日