# プログラムによるスクロール

$vuetifyオブジェクトにあるgoToメソッドを使用して、アプリケーション内でプログラムによるスクロールをトリガーできます。このメソッドは、いくつかの異なるタイプのターゲットセレクター、および組み込みのイージング機能を使用したスムーズなスクロールを含むオプションをサポートしています。

# 使い方

goTo メソッドは、 target と options の 2 つのパラメータを取ります。 target はページの上部からのピクセルオフセット、有効な css セレクタ、または要素参照のいずれかです。 options は、 duration、 easing、 container、 offset を含むオブジェクトです。

# API

$vuetify

# routerでの使用

goTo 機能は個別にインポートでき、どこからでも呼び出すことができます。これは vue-routor にフックするときに特に便利です。

// src/router.js

import Router from 'vue-router'
import goTo from 'vuetify/lib/services/goto'

export default new Router({
  scrollBehavior: (to, from, savedPosition) => {
    let scrollTo = 0

    if (to.hash) {
      scrollTo = to.hash
    } else if (savedPosition) {
      scrollTo = savedPosition.y
    }

    return goTo(scrollTo)
  },
  routes: [
    //
  ],
})

準備はできましたか？

Vuetifyのチームが選ぶ関連コンテンツで他の学習トピックに進むか、下のナビゲーションリンクでページ間を移動できます。

GitHub でこのページを編集する

最終更新日:10/07/2024, 11:31:37 AM