スムーススクロールscroll-behaviorが実用段階に

CSS 1行でスムーススクロールが実装できる「scroll-behavior」。iOSの対応と、IEのサポート終了で実用段階になりました。良くも悪くもスピードやイージングは調整できません。

CSSで簡単スムーススクロール

ページ内遷移を分かりやすくするスムーススクロール。

今まではJavaScriptで実装するのが一般的だったと思いますが、今後CSS 1行（3行？）で実装できます。

動作についてはMDN Web Docsで確認可能です。

スピードやイージングの調整不可

2022年4月現在、スクロールのスピードやイージングを調整することはできず、ブラウザ依存となります。

たまに、JavaScriptで実装したスムーススクロールサイトで、スピードが遅すぎ、閲覧しにくいことがあります。

デザイナーの感性に依存するスピードであれば、指定できなくなることが、必ずしも悪いことではありません。

ブラウザサポートが実用段階に

利用者の多いブラウザでサポートされていなかったのが、Safari（iOS）とIEです。

Safari（iOS）に関してはiOS15.4からサポートされ、IEはあとわずかな命なので無視できます。

主要ブラウザでサポートされたことで、実用できる段階になりました。