はじめに
ChromeやSafariなどのWebKitベースのブラウザでは、スクロールバーのデザインをカスタマイズすることができます。ここでは、その方法と注意点について解説します。
カスタムスクロールバーの実装
WebKitベースのブラウザでは、::-webkit-scrollbarという疑似要素を使用して、スクロールバーのスタイルをカスタマイズできます。以下は、カスタムスクロールバーの基本的な実装方法です。
::-webkit-scrollbar { -webkit-appearance: none; width: 7px; } ::-webkit-scrollbar-thumb { border-radius: 4px; background-color: rgba(0,0,0,.5); box-shadow: 0 0 1px rgba(255,255,255,.5); }注意点
-webkit-overflow-scrolling: touch;というプロパティは、スムーズなスクロール動作をiOSデバイスで実現するためのものです。しかし、このプロパティとカスタムスクロールバーのスタイルは併用できません。したがって、両方を同時に使用することは避けるようにしましょう。
まとめ
WebKitベースのブラウザでカスタムスクロールバーを実装する際は、スムーズスクロールとの併用に注意が必要です。デザインと機能の両方を考慮しながら、ユーザー体験を向上させるための実装を心掛けてください。