CSSでスタイリングスクロールバー

CSSのスクロールバーはCSSで非常に見落とされています.通常、彼らは承認のためにレイアウトにさえ存在しません、そして、彼らがするならば、彼らは多分彼らが非常に偏心しているとき、おそらく気がつくだけです.結局、良いスクロールバーは気づいていないものです.
しかし、それらをカスタマイズすることはあなたのウェブサイトやアプリの経験において小さな利得を与えることができます.標準的なブラウザやオペレーティングシステムのスクロールバーは、常に審美的に喜ばれるつもりはない.
この記事では、CSSを使用して任意のウェブサイト上でカスタムのスクロールバーを実装する方法については少しヒントを与える.

ブラウザエンジンと制限

ブラウザは、この目標を達成するための最良の方法で合意に達していないとして、まだスクロールバーのスタイルに標準的な方法はありません.現在、3つのHTMLエンジンのみが市場にあります:WebKit、ブリンクとヤモリ.

WebKit Eブリンクエンジン

blinkはWebKitの派生物であるため、ScrollBarのスタイルは同じです.Safari、Gnome Web、および他のあまり知られていないブラウザWebKitを使用しますGoogle Chromeとその派生物勇敢、オペラ、VivaldiとEDGEすべての瞬き.これは、このメソッドを使用すると、ユーザーの90 %以上をカバーすることを意味します.
このメソッドは、異なる部分を表すCSS擬似要素を使用します.それらは標準的なCSS仕様に存在しません-webkit- ブラウザの接頭語が必要です.
以下は要素です.

::-webkit-scrollbar : 通常、幅や高さなどの一般的な側面を定義するために使用されるバーの“body”を表します.

::-webkit-scrollbar-track : スクロールバーのトラック.

::-webkit-scrollbar-thumb : ハンドル自体.

他にも他の擬似要素がありますが、それらの使用は非常に特殊で一般的に不要です.以下はコードの例です.非常に慎重なスクロールバーです.

.element::-webkit-scrollbar {
  width: 3px;
  height: 3px; /* The height is only seen on horizontal scrolling */
}

.element::-webkit-scrollbar-track {
  background: transparent;
  padding: 2px;
}

.element::-webkit-scrollbar-thumb {
  background-color: #000;
}

この方法によるカスタマイズは非常に強力ですが、W 3 Cは、インターネット標準を担当する、この仕様を放棄しました.今後は中止となる.

ヤモリ

Geckoは、Firefoxとその派生物Librewolf、Torブラウザ、SeaMonkey、WaterfoxとIcecatによって使われるレンダリングエンジンです.WebKitとBlinkベースのブラウザとは異なり、GeckoはW 3 C仕様に従います.擬似要素を使用する代わりに、通常のCSS規則を使用します.
ルールは以下の通りです.

scrollbar-width : まあスクロールバーの幅または高さ.

scrollbar-color : スクロールバーの親指の色(最初の1つ)とトラック(2番目).

.element {
  scrollbar-width: thin;
  scrollbar-color: black transparent;
}

このメソッドは、はるかにエレガントですが、より強力です.ブラウザが完全にこの仕様を実装しないことに注意することは重要です.WebKitベースのブラウザでこれらの規則を使用する場合は、プレフィックス-webkit- 使用する必要があります.

包む

仕様が成熟しない間、あなたのCSSスタイリングは両方のメソッドを取り入れなければなりません.これにより、最終的なコードは次のようになります.

.element {
  scrollbar-width: thin;
  scrollbar-color: black transparent;
}

.element::-webkit-scrollbar {
  width: 3px;
  height: 3px; /* The height is only seen on horizontal scrolling */
}

.element::-webkit-scrollbar-track {
  background: transparent;
  padding: 2px;
}

.element::-webkit-scrollbar-thumb {
  background-color: #000;
}

要素のスクロールバーを見るにはoverflow[-x/-y]: scroll ルールを設定する必要があります.
次の記事でお会いしましょう!

リンク

This article in Portuguese

CSS Scrollbar Styling - Can I Use

CSS Scrollbars - MDN

この記事が何らかの形であなたを助けたらdonating . これは私がこのようなコンテンツを作成するのに役立ちます!