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

Web デザインと開発では、スクロール バーは広く使用されている要素です。これにより、ユーザーはページをスクロールして、より多くのコンテンツを表示できるようになります。ただし、ブラウザのデフォルトのスクロール バー スタイルが Web デザインと一致しない場合があり、その結果、見た目に違和感が生じることがあります。これを行うには、CSS を使用してスクロール バーのスタイルを変更し、Web デザインにうまく統合できます。この記事ではCSSでスクロールバーを変更する方法を紹介します。

1. スクロール バーのさまざまな部分を理解する

スクロール バーを変更する前に、スクロール バーのさまざまな部分を理解する必要があります。ほとんどのブラウザでは、スクロールバーはスライダー、トラック、下矢印、上矢印の 4 つの部分で構成されます。このうち、スライダーはドラッグできる部分、トラックはスライダーが移動する領域、下矢印と上矢印はそれぞれ下と上にスクロールするボタンです。

2. スライダーの色を変更する

まず、スライダーの色を変更しましょう。 CSS 疑似要素セレクターを使用して、スライダー部分を選択し、その色を変更できます。具体的なコードは次のとおりです。

/* 选中滑块部分 */
::-webkit-scrollbar-thumb {
  background-color: #666;
}

上記のコードは、スライダーの背景色を濃い灰色 (#666) に変更しますが、必要に応じて他の色に変更することもできます。

スクロール バーの CSS スタイル名はブラウザーによって若干異なることに注意してください。 Chrome、Safari などの Webkit コアを備えたブラウザでは、セレクターは「::-webkit-scrollbar-thumb」です。Firefox では、セレクターは「::-moz-scrollbar-thumb」です。IE および Edge では、セレクターは「::-moz-scrollbar-thumb」です。ブラウザーでは、セレクターは「::-ms-scrollbar-thumb」です。

3. トラックの色と背景を変更する

次に、トラックの色と背景を変更しましょう。疑似要素セレクターを使用してトラック セクションを選択し、スライダーのような方法でそのスタイルを変更します。具体的なコードは次のとおりです。

/* 选中轨道部分 */
::-webkit-scrollbar-track {
  background-color: #eee;
  border-radius: 10px;
}

上記のコードは、トラックの背景色をオフホワイト (#eee) に変更し、境界線の角の半径を 10 ピクセルに設定します。繰り返しますが、これは必要に応じて他の色や角の半径に変更できます。

4. 矢印のスタイルを変更する

最後に、矢印のスタイルを変更しましょう。スライダーやトラックとは異なり、矢印には独立したセレクターがないため、組み合わせたセレクターを使用して矢印のスタイルを変更する必要があります。具体的なコードは次のとおりです。

/* 选中滚动条按钮 */
::-webkit-scrollbar-button {
  background-color: #666;
  display: block;
}

/* 选中向上箭头 */
::-webkit-scrollbar-button:start {
  height: 20px;
  background-image: url('up-arrow.svg');
  background-size: contain;
}

/* 选中向下箭头 */
::-webkit-scrollbar-button:end {
  height: 20px;
  background-image: url('down-arrow.svg');
  background-size: contain;
}

上記のコードでは、最初にセレクター「::-webkit-scrollbar-button」を通じてスクロール バー ボタン全体を選択し、その背景色を濃い灰色に設定しました (# 666) を作成し、ブロックレベルの要素 (display:block;) として表示します。次に、コンボ セレクター「::-webkit-scrollbar-button:start」と「::-webkit-scrollbar-button:end」を使用してそれぞれ上矢印と下矢印を選択し、その高さを 20 ピクセル ( height :20px;)、background-image プロパティとbackground-size プロパティを使用して、矢印にカスタム スタイルを追加します。矢印画像は事前に準備し、正しい相対パスを使用して CSS ファイルにリンクする必要があることに注意してください。

5. 概要

これまで、CSS を使用してスクロール バーのスタイルを変更する方法を学習しました。スライダー、トラック、矢印の色、背景、サイズなどのスタイル属性を変更することで、スクロール バーを Web デザインに統合し、ユーザー エクスペリエンスを向上させることができます。スクロール バーの CSS スタイル名はブラウザによって異なる場合があるため、実際の状況に応じて調整する必要があることに注意してください。

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