Bootstrap 5 と smooth-scroll.js の相性が悪かった話

どのような現象になるか

Bootstrap5 と smooth-scroll.js （など、おそらく JavaScript を使ってのスムーズスクロール全般に言える可能性がある）を導入すると、スクロールが ”つっかかる” 動きになりました。（Chrome,Edge で確認。その他未確認。）

Bootstrap4 ではそのような動きでなかったため、どの部分で相性が悪いのかと探っていたら、Bootstrap5では、しれっと、CSSでスムーズスクロールを実現する、 scroll-behavior: smooth; が入っていやがりました。

ひとまず こうやることで回避

Bootstrap 5 の CSS から、以下が省かれていれば良いってことになるはずです。

@media (prefers-reduced-motion: no-preference) {
  :root {
    scroll-behavior: smooth;
  }
}

せいぜい上記部分なので、ダウンロードしたCSSを直接編集でも大丈夫かと思いますが、カスタマイズのやり方は以下などにて。

結論

素直にCSS scroll-behavior: smooth; を導入しましょう！

smooth-scroll.js のgithubを確認すると、「DEPRECATION NOTICE」 つまり 「廃止の通知」となっていて、CSSで導入したほうが良いよ、みたいな事が書いてありました……

ヘッダサイズの調整について

CSS scroll-margin-top で調整しましょう。
こんな感じ。

html, body {
  scroll-padding-top: 60px;
}

ヘッダのサイズを自動で取得してくれるんで、js の方が楽ちんなんだけどなぁ。

bootstrap5 でヘッダサイズ算出機能やスピード調整などもあると良いですね。（あるかも知れないですね）

safari ブラウザについて

知らない子にしちゃおう…