こんにちは。エキサイトでデザイナーをしている齋藤です。
今回はCSSプロパティの一つであるscroll-behaviorを使用して、ページ内遷移のスクロールを滑らかにする方法をご紹介します。
実現したい挙動
冒頭、ページ内遷移のスクロールについて、既定の挙動と実現したい挙動をお示しします。
Codepenに触れて体験の違いを感じてみてください。
既定の挙動
既定の挙動は以下の通りです。スクロールされるというよりかジャンプするに近い挙動です。
See the Pen ページ内遷移：既定のスクロール挙動 by AyumuSaito (@ayumusaito-excite) on CodePen.
実現したい挙動
実現したい挙動は以下の通りです。遷移先に対して滑らかにスクロールします。
See the Pen ページ内遷移：滑らかなスクロール by AyumuSaito (@ayumusaito-excite) on CodePen.
どうやって実現するか
ページ内遷移によって発生するスクロールの挙動は、scroll-behaviorで制御することができます。
既定の値はautoとなっており、スクロールされるというよりかジャンプするに近い挙動です。
一方で値をsmoothに指定すると、遷移先に対して滑らかにスクロールされるようになります。
See the Pen ページ内遷移：滑らかなスクロール by AyumuSaito (@ayumusaito-excite) on CodePen.
* {
scroll-behavior: smooth;
}
Tailwind CSSでの指定方法
Tailwind CSSではscroll-behaviorに対するUtility classが用意されています。
| Utility class | CSS |
|---|---|
scroll-auto |
scroll-behavior: auto; |
scroll-smooth |
scroll-behavior: smooth; |
さいごに
今回はCSSプロパティの一つであるscroll-behaviorを使用して、ページ内遷移のスクロールを滑らかにする方法をご紹介しました。
スタイリングされる方の一助となれば幸いです。
ご精読ありがとうございました。
