スクロールスパイを入れたかったので、入れてみた。
もともとvue-scrolltoを入れてスムーススクロールは実装していたのだが、共存させて見たら思いのほかうまく言ってかっこよくなったので記事に残す
こんな感じ
この記事とか見ごたえがあって良い
https://blog.utautattaro.com/post/qjnzkp7qa
スムーススクロール:vue-scrollto
Adds a directive that listens for click events and scrolls to elements.. Latest version: 2.20.0, las...
www.npmjs.com
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,
})
目次の作り方自体は過去の説明記事から
目次を作りたい目次とはhタグをまとめて上部にアンカーリンクを置く要件完成物とりあえずhタグが全部リンク化されている状態にしたいどうやって作るか?とりあえずフルスクラッチで作ろう具体的にbodyをデー....
utautattaro.blog
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
が追加される。
PlayCanvasのOrbit-cameraを制御して指定位置にカメラを移動させる
2023年2月27日(月) 10時7分43秒 | 300 view私的Nuxt.jsでどのアーキテクチャを選ぶかフロー
2021年4月27日(火) 15時51分42秒 | 178 viewnuxt.jsでテキストボックスクリック時にテキストを全選択する
2021年6月1日(火) 14時2分16秒 | 138 view次はURLのogp出力に挑戦
2020年10月30日(金) 16時52分19秒 | 101 viewユーザーコードを入れられるようにした
2023年2月14日(火) 3時6分48秒 | 82 view