もくじ

スクロール周りのデザイン調整とユーザビリティの改善

ハウツー
蛙のicon

こんにちは、蛙です。
今回のテーマは「スクロールバーの見た目や挙動を変更してみる」です! JavaScriptのライブラリを使う方法もあるようですが、今回ご紹介する方法はどれもCSSのみで実装できます。 初心者の方でも簡単に設定できるので、ぜひお試しください。

デザイン調整

スクロール領域だけどスクロールバーを表示したくない

スクロールバーがなくてもスクロール領域だとわかる場合には、スクロールバーを非表示にするのも良いですよね。 特に最近のスマホサイトでは、スクロールバーを見かける機会はかなり少なくなってきた気がします。

スクロールバーの色や太さを変える

デフォルトのスクロールバーの見た目は地味で簡素なので、サイトのデザインによっては浮いて見えます。 かといってスクロールバーを消してしまうと、スクロール領域だということがわかり辛くなり不便を生じることもありますよね。
そんな時は、下記のCSSを参考にスクロールバーのデザインを調整してみてください。
::-webkit-scrollbar要素は、スクロールバーの太さを調整する際に利用します。
::-webkit-scrollbar-track要素はスクロールバーの背景部分、::-webkit-scrollbar-track要素はつまみの部分のデザインを調整する際に利用します。 色を変えるだけでなく、角丸や影をつけることも可能です。

ユーザビリティの改善

ページ内リンクの移動をスルっといい感じにする

リンクをクリックするとスル~っと移動するので、ページ内リンクだということがわかりやすいですね! ブログ記事の目次やページトップに戻るボタンなどに適用すると良さそうです。 html要素にスタイルを当てればサイト全体に適用されるので、いちいち書く必要もありません。
ただ、scroll-behaviorプロパティはiOSの標準ブラウザであるSafariではサポートされていないのが残念…。 今後の対応に期待しましょう。

スクロールをピタッといい感じに止める

スクロールスナップを使えば、スクロールした際にコンテンツが画面にピタッと吸い付くような動きが実装可能です。
scroll-snap-typeプロパティでスクロールの方向と挙動を設定します。 横方向のスクロールの場合はx mandatory、縦方向のスクロールの場合はy mandatoryと記述してください。
子要素にはscroll-snap-alignプロパティを追加し、どの位置を基準にするのかを指定します。 startだと要素の開始位置(横スクロールなら左、縦スクロールなら上)、centerだと中央、endだと終了位置(横スクロールなら右、縦スクロールなら下)を基準とした挙動になります。

慣性スクロールについて

主にスマホやタブレット端末で、シュッと勢いをつけてスクロールすると指を離してもしばらくスクロールし続けますよね。 あれが慣性スクロールです。
以前はこの慣性スクロールを実装する場合にはCSSの記述が必要でした。
div { -webkit-overflow-scrolling: touch; }
現在はiPhone・Androidともに、OS側でスクロール領域には自動的に慣性スクロールを適用してくれる使用になったため、この記述は不要です。

まとめ

スクロールバーはCSSでデザインや挙動の調整ができるということを知ってる人は意外と少ないのではないかと思い、記事にまとめてみました。 特にscroll-behavior: smooth;は1行書くだけで実装できますし、やっておいて損はないでしょう。
スクロールバーのデザインに関しては、PC版ではサイトデザインに合ったスクロールバーを表示し、スマホ・タブレット版では非表示にするのがおすすめです。
蛙のicon
ひょんなことからIT業界に迷い込んだ1匹のカエル。知識ゼロからのスタートで四苦八苦。特にJavaScriptが怖い…。