【CSS】1命令でスムーズなスクロール。scroll-behavior: smooth

今回のも短めです。

だって1命令で終わりなので(^^;)

以前、スムーズななめらかスクロールを実現するためには、JavaScriptを書かなければなりませんでした。

（ここではそのコードは割愛します。）

それはそれは、けっこうめんどくさいものでした(^^;)

ところが、そんなめんどくさいスムーズスクロールをCSSが1命令でやってのけちゃったのです。

もったいぶらず、書きますね。

【CSS】

html {
   scroll-behavior: smooth;
}

はい、これだけでスムーズなスクロールが実現します。

ページ内のアンカーリンクなんかは、これ一つ入れておくだけで滑らかにページ移動しちゃいます☆

これ、主要なブラウザで出そろったのは、なんと2022年でした(^^;)

自分の記憶によると、一番最初に対応したのが FireFoxでした。

それから2020年ごろには大体のブラウザで対応されていったんですが、

Safariが一番最後に2022頃に導入して、現在は主要なブラウザでほぼ対応済みになっております。

昔はJavaScriptで書いていたものですから、これのありがたみは本当に素晴らしいものでした。

いちいち現在のスクロール位置を調べたりしなくて良いんですから(笑)

まあ、このCSSにも弱点はありまして…それはスクロールスピードをコントロールできない、というところですね。

「めっちゃ早くスクロールさせたい！」or「めっちゃのんびりスクロールさせたい～」という要望は、残念ながらかないません(^^;)

でもまあ個人的には、ほどよいスピードだと思っております。

CSSってどんどん便利になっていきますね。

個人的にはスクロール量でのメディアクエリが実現しないかなあ…と思っているんですが(笑)

果たして実装される日が来るのか、気長に待ちたいと思います(^^;)