divページ全体ではなく、ページ1 つのスクロール バーを CSS (カスケーディング スタイル シート) でカスタマイズするにはどうすればよいですか?
ベストアンサー1
スクロールバー、CSS、ブラウザの互換性に関する最新情報をまとめておくと役立つと思いました。
スクロールバーの CSS サポート
現在、クロスブラウザのスクロール バーの CSS スタイル定義は存在しません。W3Cの記事最後に言及する内容は次の通りで、最近更新されました（2014 年 10 月 10 日）。
一部のブラウザ (IE、Konqueror) は、非標準プロパティ「scrollbar-shadow-color」、「scrollbar-track-color」などをサポートしています。これらのプロパティは不正です。CSS 仕様で定義されておらず、独自のものとしてマークされていません (「-vendor-」というプレフィックスが付けられています)。
マイクロソフト
他の人が述べているように、Microsoft はスクロール バーのスタイル設定をサポートしていますが、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 のカスタム スクロールバー、関連する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
Firefox (ヤモリ)
Firefoxのバージョン64では、プロパティを通じてスクロールバーのスタイル設定をサポートしていますscrollbar-color（部分的に、W3C 草案） そしてscrollbar-width（W3C 草案実装に関する有益な情報は以下にあります。この答え。
クロスブラウザスクロールバーのスタイル
JavaScript ライブラリとプラグインは、クロスブラウザ ソリューションを提供できます。オプションは多数あります。
- 20 jQuery スクロールバー プラグインとその例（2012年7月24日）
- スライダー、スクローラー、スクロールバーのための 30 以上の JavaScript/Ajax テクニック(2008年5月7日)
- 便利なスクロールバー CSS/JavaScript スタイル設定チュートリアル 21 選（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;
}
重複または類似の質問 / 上記にリンクされていないソース
注:この回答にはさまざまなソースからの情報が含まれています。ソースが使用されている場合は、この回答にもリンクされています。