CSSでスクロールバーのスタイルを変更する方法-フロントエンドQ&A-php.cn

ホームページ

ウェブフロントエンド

フロントエンドQ&A

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

PHPz

Apr 24, 2023 am 09:08 AM

近年、インターネットの発展に伴い、ユーザーエクスペリエンスを重視する 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」を導入する必要があります。

<head>
  <link rel="stylesheet" type="text/css" href="path/to/perfect-scrollbar.css">
  <script src="path/to/perfect-scrollbar.min.js"></script>
</head>

ログイン後にコピー

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

<div class="ps">
  <p>这是需要滚动条的区域</p>
</div>

ログイン後にコピー

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

<script>
   new PerfectScrollbar('.ps');
</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 サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。