リンクをクリックしてサイト内をジャンプするとき、キュルキュルーって動きながら移動するのを見ます。
スムーズスクロールといいます。CSSの1行追加でできるようになりました。
いま一番かんたんな実装方法です。ただひとこと言いたいのは『頼むぜ。Apple!』。
これまで、スムーズスクロールはJavaScriptで実装していました。それがCSSでできちゃうなんて。
ただ未対応ブラウザがあるので、JSがまったくいらないことにはなりません。
CSSでスムーズスクロール
かんたんなので、いきなりCSSコードから。
サイト全体で使うためにhtmlタグに当ててますが、ピンポイントに当てることもできます。
また最初の3行だけでいいのですが、OSのアニメーションの設定で、最小化や禁止になっているときの設定も入れました。
(メディアクエリのprefers-reduced-motion)
最近のWebサイトは動きのあるリッチなものが増えました。でも逆に、派手な動きをつけるものが増えて、画面酔い、アニメーション酔いが問題になりました。
それを抑えるための設定がOSにはあります。
対応できないブラウザ
しかしscroll-behaviorプロパティは、いまだ対応していないブラウザがあります。(2021年5月30日 現在)
IE
Safari
Opera
SafariはMacOS, iPhoneの標準ブラウザです。Mac, iPhoneが人気の日本ではキツイですね?
(IEはいずれ消える。Operaはそこまでシェアがない。)
そこで、未対応ブラウザはJavaScriptを使います。
JavaScriptのスムーズスクロール
対応できないものはJavaScriptでやっちゃいましょう。2つのコードを作成します。
ひとつは、ブラウザ判別処理、もう一つはスムーズスクロールです。
ひとつのjsファイルに書いてもいいですが、いまはwebpackなどのビルドツールを使って分割して書いていくのが主流なのでそれに合わせました。
JavaScriptは、ページ内リンクの<a>のクリックイベントにスムーズスクロールを追加しています。
そして、ブラウザ OperaのときはJavaScript、それ以外はCSSでスクロールするように分けました。
IE, Safariはもうひと工夫が必要
IE, Safariはwindow.scrollTo()のパラメータにオブジェクトが使えません。
ということでIE, Safariはスムーズスクロールしません。捨てました。
(MacOS, iOSを捨てる。CSSかscrollTo()で対応するの待つ。)
かたくなに『許さない。必ず実装しろ!』とまで言われるのは稀でしょうから。
一応、説明はしておきましょう。『CSSもJavaScriptも未対応だから、実装は想像以上に大変ですよ?』って。
(表向き。polyfillを使えばそこまで大変じゃない。jsライブラリもある? 知らないけど。)
トランスパイル(transpile)
プログラムを、べつのバージョンや、べつの言語のプログラムに変換すること。
一種のコンパイラ。トランスコンパイラともいう。
JavaScriptは最新の仕様で開発して、任意のバージョンにトランスパイルする手法が一般的になっている。
(新しい仕様のほうがシンプルな記述で読み書きしやすいため。)
@babelが有名。
トランスパイルは文法を変換するが新しいAPI(関数やオブジェクト)までは対応できない。
古いもので確実に動かすためにはポリフィルも必要。
ポリフィル(Polyfill)
プログラムのバージョン違いでAPIが不足するところを補うこと。
プログラム言語はバージョンが上がると新しいAPIを追加する。APIは関数やクラス・オブジェクトのこと。
古いバージョンで動かすときは新しいAPIと同じ機能がないと動かない。それを作るのがポリフィル。
ポリフィルは、新しいAPIを移植するのではなく、古いバージョンのプログラムで実装できるAPIに作り直して提供する。
jQueryのmigrateはjQueryのポリフィル・パッケージ。
トランスパイルで有名な@babelにもポリフィルの拡張機能がある。
ただ、個人的にはそこまでしない方向にもっていきたい。
(jsファイルの増大は避けたいので。)