[解決済み] CSSでカスタマイズしたdivのスクロールバー
質問
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 のカスタムスクロールバー の、関連する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チュートリアル】新しいCSS:whereと:is擬似クラス関数とは?
-
[css3]css3アニメーションマウスが絵の上に置かれると徐々に大きくなり、マウスが絵から離れると徐々に縮む効果
-
[CSSチュートリアル】CSSで実現できるのなら、わざわざJavaScriptを使う必要はない
-
[解決済み】divの高さを画面の残りスペースで埋めるようにする
-
[解決済み] CSSの親セレクタはありますか?
-
[解決済み] CSSでcellpaddingとcellspacingを設定する?
-
[解決済み] スクロールバーを隠すが、スクロールはできる状態
-
[解決済み] How do I style a <select> dropdown with only CSS?
-
[解決済み] HTMLページでスクロールバーを非表示にする
-
[解決済み】HTML5入力のプレースホルダの色をCSSで変更する。
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[CSSチュートリアル】QQtabBarからCSS命名規則BEMの詳細を見る
-
[CSSチュートリアル】検索ボックスの非表示機能を実現するCSS(アニメーションの順送り・逆戻りシーケンス)
-
[CSSチュートリアル】overflow:hiddenの役割を解説(overflow hidden、clear float、外周マージンの崩れを解決する)。
-
[CSSチュートリアル】新しいCSS:whereと:is擬似クラス関数とは?
-
[CSSチュートリアル】ピュアCSSで実装した通知バーの3種類のスクロール効果
-
[css3] CSS3を使ってヘッダーアニメーション効果を作成する
-
[css3]css3によるフレックスレイアウト幅の解決方法が有効でない件
-
[CSSチュートリアル]モバイルにおけるviewportの具体的な使い方
-
[css3]CSS3遷移回転遠近法2D3Dアニメーションなどの効果を持つサンプルコード
-
[解決済み] CSSスクロールバー スタイル クロスブラウザ [重複]。