【js】「Locomotive Scroll」を使った慣性スクロールサイトについて
慣性スクロールを容易に実装できる「Locomotive Scroll」を使ったら面倒だったので備忘録
実際の使い方について解説しないのでgithub見てデモサイトとか落とした方が早い
デモファイルはdocsの中にindex.htmlファイル
スクロール量が取れない
慣性スクロール全般に言えることだがスクロール量が取れないので、スクロールしてフェードインする系のアニメーションを実装が面倒
「Locomotive Scroll」にはスクロールして要素が入ったら特定のclassを付与する機能があるが、そもそも慣性スクロールを入れるとサイトが重くなりお客さんが「やっぱ外して」と言ったら外さないといけず面倒なので「Intersection Observer」を使ってスクロールアニメーション実装する方が後々を考えて楽
遅延読み込みをするとサイト下部に隙間できる
サイトを読み込んだタイミングでサイト全体の高さが決まるのか、画像を遅延読み込みさせようとするとその分下部に隙間ができてしまう
「Locomotive Scroll」にそれについて対処する機能があるのかもしれないが、padding-topで画像の比率を保った上でposition: absoluteと「object-fit」を使って無理やり実装
fix系が上手く効かない
ヘッダーを固定させたかったのだがそれを実装するために「Locomotive Scroll（data-scroll-container）」の外に配置しない上手くいかなかった
1025pxが「Locomotive Scroll」の切り替え
スマホは基本慣性スクロールがデフォになってるので慣性スクロールを切る必要性があるんだけど、「Locomotive Scroll」でsmoothMobile: falseを指定すると1025pxで機能が切れるように設定されるみたいでcssのブレイクポイントを1025pxにする必要性があった
弄れるのかも知れないが特に理由もないのでそのまま使用
なお、「Locomotive Scroll」でdata-scrollを指定した要素が画面内に入ったらis-inviewというclassが付与される機能はsmoothMobile: falseを指定しても動いた
data-scroll-container要素やbodyにcss追加
data-scroll-containerを指定した要素に以下を指定
min-height: 100vh;
overflow: hidden;よくわからなくてbodyにもoverflow: hidden;はかけたら上手く動いた
スマホ時にリンクがクリックできない箇所が出たりした
重なり順とかが問題なのかよくわからなかったけど、pointer-events: none;とかで一個づつ調整したけど最終的にスマホサイズになったら「Locomotive Scroll」を読み込まないようにして対応
まとめ
色々と面倒くさかったけど慣性スクロールを実装するならかなりオススメ
普通に案件で使用しているサイトなんかもちょいちょい見かけたし
ただ、やっぱ慣性スクロールは重いね
環境によっては死ぬので、途中で慣性スクロールをなくしてくれと言われても対応できるように組んだほうがいいと思った