こんにちは、かずです。
なんでもかんでもCSSで実装したがりコーダーです（？）
でも本当に近年CSSで出来ることが増えすぎて、思いついたらすぐCSSで出来ないか調べる癖がついてしまいました。
ということで最近やっとこ使うようになったCSSのご紹介。
scroll-behavior
こちらなんと、アンカーリンクでよく使うスムーススクロールをJavaScript等を使わずとも実装できてしまうんです！
使い方も簡単、こうしてこうです。
body要素に一行記述するだけでもう完成です！
ただこのままだとちょっとあれなのでもうひと手間。
scroll-padding-top
こちらは、ページ内リンクで移動した際に、通常は移動先にぴったりくっついてしまいますが、このプロパティでスクロール位置を上方向に調整出来ます！
実際の余白でなくスクロールに対する余白というのがポイント！
言葉で表現するの難しいですねこれ・・・
という訳で scroll-padding-top も含めた記述がこちら。
こうしてこうしてこうです。
:root{
--header-height: 100px;
@media screen and (max-width: 767px){
--header-height: 60px;
}
}
body {
scroll-behavior: smooth;
scroll-padding-top: var(--header-height);
}カスタムプロパティでヘッダーの高さ分の数値を入れてあげて、その分だけスクロール先の上部に余白をつけてスムーススクロール！
もちろんモダンブラウザにも対応しているので自由に使いたい放題です！
カスタムプロパティ
scroll-behavior
scroll-padding-top
デメリットとしては、
・ヘッダーの高さがリアルタイムで取得出来ない
・スクロールスピードが指定出来ない
・urlにハッシュタグが付く（好みにもよりますが・・・）
といったくらいでしょうか。
JavaScript等と違ってカスタマイズが出来ないので、動きや速さなどをいじりたい場合は従来の方法でやりましょう！
それでは。
この記事をシェアする
-
人気の記事
-
新着記事
-
カテゴリー
body {scroll-behavior: smooth;
}