この記事では、スクロールバーの世界に飛び込みます。 あまり魅力的ではないように聞こえますが、よくデザインされたページは、一致するスクロールバーと密接に関連しています。 昔ながらのクロムのスクロールバーは、あまり収まりません。
スクロールバーの核心的な詳細を調べてから、いくつかのクールな例を見ていきます。
スクロールバーのコンポーネント
これは本当に復習です。 あります ここCSS-Tricksに関するたくさんの投稿 CSS でのカスタム スクロールバーのスタイル設定について詳しく説明します。
スクロール バーのスタイルを設定するには、スクロール バーの構造に精通している必要があります。 次の図を見てください。
ここで留意すべき XNUMX つの主なコンポーネントは次のとおりです。
- 追跡する バーの下の背景です。
- 親指 ユーザーがクリックしてドラッグする部分です。
ベンダー接頭辞を使用して、スクロールバー全体のプロパティを変更できます::-webkit-scrollbar セレクタ。 スクロール バーに固定幅、背景色、丸みを帯びた角など、さまざまなものを指定できます。 ページのメイン スクロールバーをカスタマイズする場合は、 ::-webkit-scrollbar HTML 要素に直接:
html::-webkit-scrollbar {
/* Style away! */
}の結果であるスクロールボックスをカスタマイズしている場合 overflow: scroll、次に使用できます ::-webkit-scrollbar 代わりにその要素で：
.element::-webkit-scrollbar {
/* Style away! */
}以下は、HTML 要素のスクロールバーのスタイルを設定して幅を広くし、背景を赤にする簡単な例です。
スクロールバーのサムまたはトラックのみを変更したい場合はどうすればよいでしょうか? ご想像のとおり、これら XNUMX つのプレフィックス付きの特別な疑似要素があります。 ::-webkit-scrollbar-thumb & ::-webkit-scrollbar-track、 それぞれ。 これらすべてを組み合わせると何が可能になるかを以下に示します。
十分なブラッシュアップ！ カスタム スクロールバーのスタイル設定を XNUMX 段階紹介した後、インスピレーションを得るためにウェブ全体から集めた古い例の大きなショーケースを開きます。
シンプルで上品なスクロールバー
カスタム スクロールバーは、依然として最小限に抑えることができます。 つまみやトラックの色を少し変更したり、背景を軽くスタイリングしたりして、外観を微妙に変更する例のグループをまとめました。
ご覧のとおり、スクロールバーのスタイリングに関しては、それほど難しく考える必要はありません。 全体的なテーマに一致するスクロールバーを使用して全体的なユーザー エクスペリエンスを向上させるには、わずかな変更が必要な場合があります。
目を引くクールなスクロールバー
しかし、認めましょう。少しやり過ぎて創造性を発揮するのは楽しいことです。 場合によっては「多すぎる」かもしれない奇妙でユニークなスクロールバーをいくつか紹介しますが、確かに目を引くものです。
もうXNUMXつ…
スクロールバーを電車の中で回転させて親指に、トラックをトラックにしましょう。
