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

近年、インターネットの発展に伴い、ユーザー エクスペリエンスを重視する Web サイトが増えていますが、その中でもスクロール バーのスタイルは小さいながらも重要な要素の 1 つです。従来のスクロール バーは美しくなく、通常はブラウザーに付属のデフォルト スタイルしかなく、カスタマイズすることはできません。ただし、CSS を変更することで、スクロール バーのスタイルを簡単に変更して、Web サイト全体のスタイルとの一貫性を高めることができます。

まず第一に、スクロール バーの性質を理解する必要があります。スクロール バーは実際には、スライダーとスクロール バー トラックの 2 つの部分で構成される要素です。スライダーは現在の位置を識別するために使用されますが、スクロール バー トラックはそれが配置されているバー要素全体を参照します。したがって、スクロール バーのスタイルを変更するには、これら 2 つの部分を別々に処理する必要があります。

1. スライダーのスタイルを変更する

スライダーのスタイルを変更するには、疑似クラス セレクター「::-webkit-scrollbar-thumb」を使用できます。この疑似クラス セレクターは、Chrome、Safari などの Webkit コアを備えたブラウザーでのみ有効です。

コードは次のとおりです:

::-webkit-scrollbar-thumb {
    background-color: #8B8B8B;
    border-radius: 10px;
}

上記のコードは、スライダーの背景色を灰色に設定し、スライダーの角を丸い角に設定することを意味します。

同時に、幅と高さの設定など、スライダーの他のカスタム スタイルを変更することもできます:

::-webkit-scrollbar-thumb {
    background-color: #8B8B8B;
    border-radius: 10px;
    width: 10px;
    height: 50px;
}

2. スクロール バー トラックのスタイルを変更する

To スクロール バー トラックのスタイルを変更するには、「::-webkit-scrollbar-track」疑似クラス セレクターを使用できます。

コードは次のとおりです:

::-webkit-scrollbar-track {
    background-color: #F0F0F0;
    border-radius: 10px;
}

上記のコードは、スクロール バー トラックの背景色が明るい灰色に設定され、スクロール バー トラックの角が丸く設定されていることを示しています。角。

同様に、高さと幅の設定など、スクロール バー トラックに対して他のカスタム スタイルの変更を行うこともできます。

::-webkit-scrollbar-track {
    background-color: #F0F0F0;
    border-radius: 10px;
    width: 20px;
    height: 200px;
}

注: 変更する Web ページが Webkit 以外を使用している場合Firefox や IE などのカーネル ブラウザでは、上記のコードは有効になりません。したがって、クロスブラウザーのスクロール バー スタイルの変更を実現するには、他のいくつかのテクニックも使用する必要があります。

3. クロスブラウザー スクロール バー スタイルの変更を実装する

クロスブラウザー スクロール バー スタイルの変更を実装するには、サードパーティの JS ライブラリ「perfect-scrollbar」を使用できます。このライブラリでは、スクロールバーの完全にカスタマイズ可能な変更が可能で、Chrome、Firefox、Safari などを含むすべての一般的なブラウザをサポートしています。

まず、

タグ内に 2 つのファイル「perfect-scrollbar.css」と「perfect-scrollbar.min.js」を導入する必要があります。

  <link>
  <script></script>

次に、スタイルを変更する領域にコンテナ div を追加し、そこにスタイル クラス名「ps」のクラスを追加します。

<div>
  <p>这是需要滚动条的区域</p>
</div>

次に、js で、ステートメント「new PerfectScrollbar('.ps')」を使用してコンテナーを初期化します。

<script>
   new PerfectScrollbar(&#39;.ps&#39;);
</script>

最後に、CSS に対応するスタイルを追加して、スクロール バーをカスタマイズできます。

.ps {
  height: 200px;
  overflow: auto;
}
.ps__rail-x {
  background-color: #eee;
  bottom: 3px;
  height: 10px;
}
.ps__rail-y {
  background-color: #eee;
  width: 10px;
  right: 3px
}
.ps__thumb-x {
  background-color: #a1a1a1;
  border-radius: 6px;
}
.ps__thumb-y {
  background-color: #a1a1a1;
  border-radius: 6px;
  width: 6px;
}

上記のコードでは、「.ps」はコンテナ div のスタイル クラス名で、高さ、幅、その他のサイズ スタイルを設定できます。 「__rail-x」と「__rail-y」はそれぞれスクロール バー トラックの x 方向と y 方向に対応し、スクロール バー トラックのスタイルを設定するために使用されます。 「__thumb-x」と「__thumb-y」はそれぞれスライダーの x 方向と y 方向に対応し、スライダーのスタイルを設定するために使用されます。

上記のプロセスにより、さまざまなブラウザでスクロール バーのスタイルを変更できるようになります。 CSS 疑似クラス セレクターを使用する場合でも、サードパーティ ライブラリを使用する場合でも、スクロール バーのスタイルを簡単に変更し、Web サイト全体のエクスペリエンスを向上させることができます。

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