🥶
Lenisで慣性スクロールが止まる、重い、固まる、ジャンプする。
Lenisという慣性スクロールのライブラリ。最近よく目にするが、GSAPのScroll Triggerとの統合や、動作の面で秀逸らしい。動作も独自関数を組むと、慣性のもったり感も自由に設計できる。公式サイトもいかしている。見た目を司るライブラリはデモがいかしててナンボ。
ただ、Reactで導入したところ、初回ロード時にLenisが時間差で反応する、固まる、ジャンプするなどの現象が起こった。
Lenisは公式でもGASPの統合についての説明があるので、てっきりこれの書き方が悪いもんだと思いこんで色々試行錯誤してみるも、どうにも治らない。全然治らない。
しかも更に厄介だったがChromeではなくsafariでみると問題なく動いたこと。環境依存か？
単純に導入しただけなのに、こういうことが起こるとなかなか困る。
秘技"ライブラリのせいにする"を使いたくなる。
しばらくハマったあげく藁にもすがる思いでGitのクローズissueを訪問。
関連がありそうなissueを片っ端から見ていると、気になるものを発見。
結論から言うと、
scroll-behavior: smooth;
を
scroll-behavior: auto;
に変更せよという旨の案内。
とはいえscroll-behaviorのdefaultはautoである。
例に漏れず、smoothなど設定していなかった。
検証ツールを開いても、特に指定なし。
ただ既に手詰まりだったので、なんとなく
scroll-behavior: auto;
を明示的に記述したところ...
治った😧😧😧
スタイルとしては上がってきてないけど、ブラウザの仕様でsmoothか、もしくはそれに類似するものが設定されていて、それが干渉していたなこれ。。。
同様の現象に悩まれている方、一度試してみてくださいませ。
Discussion