スクロールスパイを入れたかったので、入れてみた。
もともとvue-scrolltoを入れてスムーススクロールは実装していたのだが、共存させて見たら思いのほかうまく言ってかっこよくなったので記事に残す
こんな感じ
この記事とか見ごたえがあって良い
https://blog.utautattaro.com/post/qjnzkp7qa
スムーススクロール:vue-scrollto
https://www.npmjs.com/package/vue-scrollto
スクロールスパイ:v-b-scrollspy (bootstrap-vue)
https://bootstrap-vue.org/docs/directives/scrollspy
まずは普通にvue-scrollto
をyarn add
yarn add vue-scrollto
こちらはVueのライブラリなのでNuxtで使うためにPluginにするplugins
フォルダにvue-scrollto.js
を作成
import Vue from 'vue'
import VueScrollTo from 'vue-scrollto'
Vue.use(VueScrollTo, {
duration: 700,
easing: [0, 0, 0.1, 1],
offset: -200,
})
目次の作り方自体は過去の説明記事から
https://blog.utautattaro.com/post/kvawuzxju
vue-scrolltoはv-scroll-to
要素にidを挿入し、to
オプションを付与する必要があるのでハッシュリンクを以下のように修正
<b-list-group-item class="py-1 tablelist" v-bind:class="'t'+table.tag" v-scroll-to="table.id" v-for="table in tableofcontent" to v-bind:href="table.id" v-html="table.text"></b-list-group-item>
href
は何も入れなくても動くのだが後述するv-b-scrollspy
のために入れておく
入れてもスムーススクロールは問題なく動く
次にv-b-scrollspy
の設定。v-b-scrollspy
を実行するには以下の4つの条件が揃う必要がある
b-nav
かb-list-group
である必要があるposition: relative;
である必要があるoverflow-y:scroll;
を追加する必要があるhref
を有している必要があり、スパイ対象と同一でなければならない
今回は記事内をスパイしたかったが、記事単体にoverflow-y:scroll;
を設定していまうと不要なところにスクロールバーが出てしまうのでbody
をスパイ対象とした。
使い方は、スパイした結果を表示するDOMグループにv-b-scrollspy="250"
を要素として設定すればOK
引数に数値を指定することでそれがoffsetの値になる。vue-scrolltoと完全に一致しないので微調整済み
これでスパイが実行され、閲覧中のidをhref
に持ったポインタDOMがclassにactive
が追加される。
Google Analytics Reporting API v4からGoogle Analytics Data API(GA4)に切り替えた
2023年2月5日(日) 19時3分45秒 | 575 viewエンジニアが「社会人サークル」を始めるべきである7つの理由
2022年8月16日(火) 14時29分57秒 | 525 viewグリグリリック 開発秘話
2020年12月8日(火) 4時30分37秒 | 157 view【Web表現チェンジャー】PlayCanvasに追加された3Diframeサンプルが控えめに言ってヤバい
2021年1月13日(水) 15時21分41秒 | 97 viewWebの変更をLINEに通知する仕組みを提供するサービスをココナラに出品しました
2020年10月25日(日) 2時50分32秒 | 36 view