scroll-behavior でページ内リンクの移動にスクロールをつける
scroll-behavior は現在 Chrome と Firefox でサポートされている。このプロパティはスクロールが発生したときにスクロールの振る舞いを指定できる。また、ユーザー操作によるスクロールを制御するわけではないので注意。
指定できる値は 2つ。
auto... 瞬時にスクロールするsmooth... スクロールの開始〜終了までの様子を見せながらスクロールする
MDN のコードをお借りして動きの確認をした。
auto はあらかじめ知識がないとページの中をスクロールしたことにさえ気づけない。これに対して smooth はスクロールの様子が見えるのでページ内遷移してることがわかりやすい。
これまでの開発者はこのような「スクロールを見せる」挙動を Javascript で実装しなければいけなかったが、scroll-behavior: smooth を指定すれば CSS だけで同じことができる。
スクロールの動きや時間の調整は CSS だけでは難しそうだが、最低限の振る舞いはこのプロパティでできそうだ。
参考
余談。
MDN に「スクローリングボックス」って言葉が出てくるけど、これなんだろ。overflow でくくったボックスのことを指してるんだと思ったけど、overflow 以外のパターンもあるのかな？
調べても言葉の意味がヒットしなかったのと、検証が足りない。
