【CSSのみ】header固定のスムーススクロール実装
スムーススクロールはCSSのみ（js不要）で実装できるって本当ですか？
ということでやってみました。
ソース（CodePen）
基本的にはHTMLタグにCSSプロパティ、
・scroll-behavior
・scroll-padding-top
の２つを設定するのみ。
スムーススクロールは scroll-behavior で指定
ヘッダー固定時は scroll-padding-top でオフセット指定
ヘッダー固定時のスクロール後に、ヘッダーとコンテンツの被りを回避するためオフセットさせたい場合には
scroll-padding-top: 80px;
とヘッダー高さ＋αを指定すれば良し。
以上！簡単すぎる！
scroll-padding-topのヘッダー高さ「＋α」としている理由は、オフセットがヘッダー高さ分のみだと、スクロール後にヘッダー下部とコンテンツ上部が隙間無くくっついて気になったので、余白分を設けるためです。
スムーススクロールにはjsが必須と思っていましたが、CSSだけで実装できるとは、、、
どんどんCSSが便利になっていきますね！
ただし、easingの設定はない模様（2023年10月現在）
2023年10月現在、CSSでのスムーススクロールにeasingの設定は出来ない様子。
よって、easing設定をしたいのであれば、現状はjsということになります。
（そのうち実装されるんじゃないかなーなんて期待）
この記事が気に入ったらサポートをしてみませんか？