1. ホーム
  2. css

[解決済み] 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も独自のバージョンを持つようになりました。

ファイアフォックス(Gecko)

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

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

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

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

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

スクロールバーのスタイリングに "-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;
}

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

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