[解決済み] CSSでカスタマイズしたdivのスクロールバー

2022-03-15 16:45:07

質問

CSS（カスケーディング・スタイル・シート）を使ってスクロールバーをカスタマイズする方法 div ページ全体ではなく

解決方法は？

スクロールバーやCSS、ブラウザの互換性などに関する最新情報を集約しておくと便利だと思ったからです。

スクロールバーCSS対応

現在、クロスブラウザー用のスクロールバーCSSスタイル定義はありません。 W3Cの記事最後に紹介するのは、以下のような記述で、最近（2014年10月10日）更新されたものです。

<ブロッククオート

一部のブラウザ（IE、Konqueror）では、非標準のプロパティ「scrollbar-shadow-color」、「scrollbar-track-color」などをサポートしています。これらのプロパティは違法です: これらはどのCSS仕様でも定義されておらず、（"-vendor-"をプレフィックスとして付けることで）プロプライエタリであるとマークされてもいません。

マイクロソフト

他の方がおっしゃっているように、マイクロソフトはスクロールバー・スタイリングをサポートしていますが、IE8以上のみです。

例

.TA {
    scrollbar-3dlight-color:gold;
    scrollbar-arrow-color:blue;
    scrollbar-base-color:;
    scrollbar-darkshadow-color:blue;
    scrollbar-face-color:;
    scrollbar-highlight-color:;
    scrollbar-shadow-color:
}

Chrome &; Safari (WebKit)

同様に、WebKitも独自のバージョンを持つようになりました。

スクロールバーのスタイリング https://www.webkit.org/blog/363/styling-scrollbars/
WebKit のスクロールバーに関するすべてのスタイリングのデモ

から WebKit のカスタムスクロールバーの、関連するCSSです。

 /* pseudo elements */
 ::-webkit-scrollbar              {  }
 ::-webkit-scrollbar-button       {  }
 ::-webkit-scrollbar-track        {  }
 ::-webkit-scrollbar-track-piece  {  }
 ::-webkit-scrollbar-thumb        {  }
 ::-webkit-scrollbar-corner       {  }
 ::-webkit-resizer                {  }

 /* pseudo class selectors */
 :horizontal
 :vertical
 :decrement
 :increment
 :start
 :end 
 :double-button
 :single-button
 :no-button
 :corner-present
 :window-inactive

ファイアフォックス（Gecko）

バージョン 64 で Firefox はプロパティを通じてスクロールバーのスタイル設定をサポートしました。 scrollbar-color (一部。 W3Cドラフト ) と scrollbar-width ( W3Cドラフト ). 実装に関する良い情報は、以下のサイトにあります。この回答 .

クロスブラウザのスクロールバーのスタイリング

JavaScriptのライブラリやプラグインは、クロスブラウザのソリューションを提供することができます。多くのオプションがあります。

20 jQuery Scrollbarプラグイン（サンプル付き (2012年7月24日)
スライダー、スクローラー、スクロールバーのための30以上のJavaScript/Ajaxテクニック (2008年05月07日)
21の便利なスクロールバーCSS/JavaScriptスタイリングチュートリアル (2012年8月)
15以上の無料およびプレミアムjQueryスクローリングプラグイン (2012年8月26日)

数え上げればきりがない。最善の策は、利用可能なソリューションを探し、研究し、テストすることです。きっと、あなたのニーズに合ったものが見つかるはずです。

スクロールバーのスタイルがおかしくならないようにする。

スクロールバーのスタイリングに "-vendor" が正しく付加されていないのを防止したい場合に備えています。 W3Cの記事で、基本的な説明があります。 . 基本的には、ブラウザに関連付けられたユーザースタイルシートに、以下のCSSを追加する必要があります。これらの定義は、あなたが訪れたページで無効なスクロールバースタイルを上書きします。

body, html {
  scrollbar-face-color: ThreeDFace !important;
  scrollbar-shadow-color: ThreeDDarkShadow !important;
  scrollbar-highlight-color: ThreeDHighlight !important;
  scrollbar-3dlight-color: ThreeDLightShadow !important;
  scrollbar-darkshadow-color: ThreeDDarkShadow !important;
  scrollbar-track-color: Scrollbar !important;
  scrollbar-arrow-color: ButtonText !important;
}

重複または類似の質問/上記でリンクされていないソース

スクロールバーのスタイルを変更する
CSSスクロールバースタイルクロスブラウザ
divにカスタムスクロールバーを作成する方法 (Facebookスタイル)

注この回答には、さまざまなソースからの情報が含まれています。もしソースが使用されたなら、それはこの答えの中でもリンクされています。