CSSでスクロールバーのスタイルを変更する方法

Web 開発では、スクロール バーは頻繁に使用される機能です。ただし、ブラウザーのデフォルトのスクロール バー スタイルは、開発者やユーザーのニーズを常に満たしているとは限りません。したがって、CSS スタイルを通じてスクロール バーの外観を変更できます。

CSS3 には、スクロール バーをカスタマイズするための一連の疑似要素属性が用意されており、これらの属性を使用してスクロール バーのスタイルを変更できます。よく使用される属性を次に示します。

• ::-webkit-scrollbar: Webkit コア ブラウザー (Chrome および Safari) で動作します。
• ::-moz-scrollbar: Firefox で動作します。ブラウザ
• ::-o-scrollbar: Opera ブラウザで動作します
• ::-ms-scrollbar: Internet Explorer ブラウザで動作

Chrome ブラウザを採用します例として、CSSを使用してスクロールバーのスタイルを変更する方法を紹介します。

まず、上記の疑似要素を使用してスクロール バーを選択する必要があります。

/* 选中垂直滚动条 */
::-webkit-scrollbar {
  width: 10px; /* 设置滚动条宽度 */
}

/* 选中水平滚动条 */
::-webkit-scrollbar-horizontal {
  height: 10px; /* 设置滚动条高度 */
}

/* 选中滚动条轨道 */
::-webkit-scrollbar-track {
  background: #eee; /* 设置滚动条轨道颜色 */
}

/* 选中滚动条滑块 */
::-webkit-scrollbar-thumb {
  background: #aaa; /* 设置滚动条滑块颜色 */
}

コードでは、4 つの疑似要素を使用してスクロール バーのさまざまな部分を選択します。 ::-webkit -scrollbar、::-webkit-scrollbar-horizo​​ntal、::-webkit-scrollbar-track、および ::-webkit-scrollbar-thumb。

このうち、::-webkit-scrollbar は、スクロール バー全体を選択し、スクロール バーの幅を設定するために使用されます。 ::-webkit-scrollbar-horizo​​ntal は、水平スクロール バーを選択し、スクロール バーの高さを設定するために使用されます。 ::-webkit-scrollbar-track は、スクロール バーのトラック部分を選択し、トラックの色を設定するために使用されます。 ::-webkit-scrollbar-thumb は、スクロール バーのスライダー部分を選択し、スライダーの色を設定するために使用されます。

スライダー上をスライドするときにスタイル効果を実現したい場合は、ホバー疑似クラスを使用してスライダーを選択できます:

/* 选中滑过滚动条滑块部分 */
::-webkit-scrollbar-thumb:hover {
  background: #666;
}

上で紹介したスタイル属性に加えて、使用できるその他の属性は、border-radius、box-shadow など、スクロール バーの外観を変更するために使用されます。これらのプロパティのほとんどは Webkit ブラウザーでのみ有効であり、ブラウザーが異なると実装が若干異なる場合があることに注意してください。

さらに、Perfect Scrollbar や JScrollPane などのサードパーティの CSS ライブラリを使用して、カスタマイズされたスクロール バー スタイルをより簡単に実装することもできます。

つまり、CSS スタイルを使用すると、スクロール バーの外観を非常に柔軟に変更して、より良いユーザー エクスペリエンスと Web デザインを実現できます。

以上がCSSでスクロールバーのスタイルを変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。