css-スクロールバーのスタイル設定

スクロールバーの理由

幅と高さを設定できる要素に、overflow: scroll スタイルを追加すると、要素領域にスクロールバーが生成されます。

スクロールバーのデフォルトスタイル

以下の書き方はすべてEdgeブラウザ環境でテスト済みです。

ここに画像の説明を挿入

スクロールバーのスタイルを設定

::-webkit-scrollbar疑似要素を設定して、スクロールバーのスタイルに影響を与えます。これは、 BlinkまたはWebkitベースのブラウザーでのみ使用できることに注意してください。

::-webkit-スクロールバー

スクロールバー全体のスタイルを設定するために使用されます。

例: スクロールバーのサイズと背景色を設定する

<!-- html -->
<div class="box">
  text text text text text text text text  
  text text text text text text text text
  text text text text text text text text
  text text text text text text text text
  text text text text text text text text  
  text text text text text text text text
  text text text text text text text text  
</div>
<!-- css -->
.box::-webkit-scrollbar{
  width: 10px;
  height: 10px;
  background-color: red;
}

ここに画像の説明を挿入

::-webkit-scrollbar-thumb

スクロールバーのスクロールサム

例: スライダーの背景色を設定する

.box::-webkit-scrollbar-thumb{
    
    
  background-color: blue;
}

ここに画像の説明を挿入

::-webkit-scrollbar-track

スクロールバートラック。::-webkit-scrollbarとの違いは、 ::-webkit-scrollbar-track がスライダースライドエリアのスタイルを設定することです。

例: スクロールバートラックの背景色を設定する

.box::-webkit-scrollbar-track{
    
    
  background-color: yellow;
}

ここに画像の説明を挿入

::-webkit-scrollbar-track-piece

スライダーのないスクロールバーのトラック部分。::-webkit-scrollbar-track-piece は::-webkit-scrollbar-trackと同じ効果があり、前者はトラック全体のスタイルを設定し、後者はトラック全体のスタイルを設定します。スライダー。だから視覚的に一貫している。

例: スライダー部分を削除するようにトラックスタイルを設定します。

.box::-webkit-scrollbar-track-piece{
    
    
  background-color: green;
}

ここに画像の説明を挿入

::-webkit-scrollbar-corner

含まれている場合の垂直スクロールバーと水平スクロールバーの両方の交点。通常、要素の右下隅。

例: 水平スクロールバーと垂直スクロールバーの交点の背景色を設定します。

.box::-webkit-scrollbar-corner{
    
    
  background-color: cyan;
}

ここに画像の説明を挿入

::-webkit-resizer

要素がドラッグ可能に設定されている場合 (サイズ変更: 水平方向 | 垂直方向 | 両方)、要素のサイズを調整するためのスライダーが要素の下隅に表示されます。

例: 要素のサイズを変更するスライダーの背景色を設定します。

.box{
    
    
  resize: horizontal;
}
.box::-webkit-resizer{
    
    
  background-color: rgb(242, 5, 151);
}

ここに画像の説明を挿入

::webkit-scrollbar-button

スクロールバーの両端に上下（左右）のスクロールボタン（上下左右の矢印）を設置します。

例: これはボタンのスタイルです

.box::-webkit-scrollbar-button{
    
    
  background-color: pink;
  border-radius: 20px;
  width: 20px;
}

ここに画像の説明を挿入

要約する

スクロールバー全体には、主に 上下 (左右) のスクロールスライダー、スクロールボタン スライダー、これらのパーツのスライドトラックが含まれます。これらの疑似要素を慎重に使用してスクロールバーのスタイルを設定してください。これらの機能は非標準であり、ユーザーの使用環境によっては一部のブラウザーでは機能しないためです。