成果物

キミを探す、夏 開発秘話 | EMC2NARYTL;DR マジカルミライ2021プログラミングコンテストで、拙作「キミを探す、夏」が最優秀賞を受賞しました。本記事では作品の作り方やモチベーションについてブレイクダウンしながら解説していきたいと思いutautattaro.blog

技術スタック

スムーススクロール：vue-scrollto
https://www.npmjs.com/package/vue-scrollto
スクロールスパイ：v-b-scrollspy (bootstrap-vue)
Scrollspy | Directives | BootstrapVueAutomatically 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タグが全部リンク化されている状態にしたい どうやって作るか？ とりあえずフルスクラッチで作ろう 具体的にutautattaro.blog

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

• スパイした結果を表示する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が追加される。