TL;DR

スクロールスパイを入れたかったので、入れてみた。
もともとvue-scrolltoを入れてスムーススクロールは実装していたのだが、共存させて見たら思いのほかうまく言ってかっこよくなったので記事に残す

成果物

キミを探す、夏　開発秘話 | EMC2NARY

マジカルミライ2021プログラミングコンテストとはこのブログでも何回か取り扱っている、マジカルミライ2021に合わせてクリプトンと産総研で共同開催されたプログラミングコンテストです。https://....

utautattaro.blog

技術スタック

スムーススクロール：vue-scrollto

vue-scrollto

Adds a directive that listens for click events and scrolls to elements.. Latest version: 2.20.0, las...

www.npmjs.com

Scrollspy | Directives | BootstrapVue

Automatically activate BootstrapVue navigation or list group components based on scroll position to ...

bootstrap-vue.org

やり方

まずは普通に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,
})

目次の作り方自体は過去の説明記事から

目次を作りたい→作った | EMC2NARY

目次を作りたい目次とはhタグをまとめて上部にアンカーリンクを置く要件完成物とりあえずhタグが全部リンク化されている状態にしたいどうやって作るか？とりあえずフルスクラッチで作ろう具体的にbodyをデー....

utautattaro.blog

<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つの条件が揃う必要がある

• スパイした結果を表示するDOMグループはb-navかb-list-groupである必要がある
• スパイ対象のDOMはposition: relative;である必要がある
• スパイ対象がbodyでない場合はoverflow-y:scroll;を追加する必要がある
• スパイした結果を表示するDOMはhrefを有している必要があり、スパイ対象と同一でなければならない

今回は記事内をスパイしたかったが、記事単体にoverflow-y:scroll;を設定していまうと不要なところにスクロールバーが出てしまうのでbodyをスパイ対象とした。

使い方は、スパイした結果を表示するDOMグループにv-b-scrollspy="250"を要素として設定すればOK
引数に数値を指定することでそれがoffsetの値になる。vue-scrolltoと完全に一致しないので微調整済み

これでスパイが実行され、閲覧中のidをhrefに持ったポインタDOMがclassにactiveが追加される。