web-dev-qa-db-ja.com

Firefoxでのスクロールバーの色の変更

Firefoxでスクロールバーの色を変更したい。どうやってやるの？

cssfirefoxscrollscrollbar
23
XMen

Firefoxでのスクロールバーの色の変更は、Internet ExplorerやOperaほど簡単ではありません。 Firefoxでは、テーマによってスクロールバーのスタイルのみを設定できます。これは良いことです。多くのユーザーは、デザイナーの気まぐれでインターフェイスウィジェットのルックアンドフィールがランダムに変更されることを好みません。インターフェースのピースの外観を変更することは、ハイコントラストテーマを使用している視覚障害のある訪問者にとってはさらに大きな問題になる可能性があります。

つまり、スクロールバーがページの<div>内に含まれている場合、カスタムスクロールバーを作成し、JavaScriptを使用して機能させることができます。このjQueryプラグインは、非常にうまくトリックを実行するように見えます。 http://jscrollpane.kelvinluck.com/

これは多かれ少なかれあなたがやりたいことだと思います： http://martinsmucker.com/demo/scroller.html

仕組みは次のとおりです。

ドキュメントの<head>内で、いくつかのスタイルシートとスクリプトを参照する必要があります（おそらく、既に http://jscrollpane.kelvinluck.com/ からダウンロードしています）。

これは、魔法の大部分が発生する場所です。

<!-- Styles -->
<link rel="stylesheet" type="text/css" href="jquery.jscrollpane.css" />
<style type="text/css">
    html, body {
        height: 100%;
        margin: 0;
        padding:0;
    }
    #container {
        height:100%;
        width:100%;
        margin: 0;
        padding:0;
        overflow: auto;
    }
</style>

<!-- Scripts -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.mousewheel.js"></script>
<script type="text/javascript" src="jquery.jscrollpane.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('.scroll-pane').jScrollPane();
    });
</script>

これは、cssおよびjsファイルがhtmlファイルと同じディレクトリにあることを前提としています。まず、提供されたスタイルシートにリンクします。

次に、CSSを少し追加して、通常のスクロールバーが表示されないようにします。 htmlおよびbodyのmarginおよびpaddingを0に設定し、heightを100％に設定します。すべてのコンテンツは、IDが「container」のdivにラップされます。このコンテナはページを正確に塗りつぶし（高さ：100％;幅：100％;）、スクロールバーをカスタマイズできるようにスクロールをスチールします（overflow: auto;）。

次に、適切なスクリプトをすべて参照します。ここでは、GoogleがホストするjQueryのコピーを使用しています。また、すべてのローカルスクリプトがhtmlファイルと同じディレクトリにあると仮定しています。 jqueryの最後の少しは、「スクロールペイン」クラスを持つすべてのdivを見つけ、適切な要素とスクロール機能をそれらに追加します。

HTMLは非常に簡単です。

<body>
    <div class="scroll-pane" id="container">
    All of your content for the page goes here.
    </div>
</body>

すべてを正しく行った場合、ページは私の例のようになります。

13
Michael Martin-Smucker

ChromeとSafariは、スクロールバーの色付けをサポートしています。次のコードをcssに配置して、魔法の発生を確認してください。

::-webkit-scrollbar {
  height: 12px;
  width: 12px;
  background: #969696;
  -webkit-border-radius: 1ex;
}

::-webkit-scrollbar-thumb {
  background: #2B2B2B;
  -webkit-border-radius: 1ex;
  -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.75);
}

::-webkit-scrollbar-corner {
  background: #1A1A1A;
}

不足しているのは、Firefoxがこの機能をサポートすることだけです。

7
Sander

CSSから直接使用することはできません。

ただし、jQueryを使用できる場合は、 jscrollpane が役立ちます。

3
Nivas

できません。 here を見るとわかるように、これはfpr IE5 +およびOpera7.2 +でのみ可能です。

EDIT：少しのjavascriptを使用すると、自分の「html-scrollbars」をビルドして、好きなようにスタイル設定できます-しかし、私はあなたはそれをするべきだとは思わない、これを詳細に書くだけだ。

2
oezi

Firefoxバージョン64以降では、スクロールバーのスタイリングが制限されています。

.my-scrollable {
   scrollbar-color: red blue;
   scrollbar-width: thin;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color を参照してください

0
salomvary

私の知る限り、これはあまり役に立ちませんが、Firefoxでスクロールバーを表示するかどうかを制御する属性は次のとおりです：（ reference link ）

Attribute....scrollbars
Type.........nsIDOMBarProp
Description..The object that controls whether or not scrollbars 
             are shown in the window. This attribute is "replaceable" 
             in JavaScript. Read only

Firefoxには、ベンダー固有の次のプロパティもあります。

オーバーフロー：-moz-scrollbars-none

他の有効な値は-moz-scrollbars-horizo​​ntalおよび-moz-scrollbars-verticalです。

0
davidcondrey

firefoxまたはクロスブラウザの場合は、次を使用できます。 jQueryカスタムコンテンツスクローラー

よりシンプルで使いやすい

ここでは、Magentoで実装し、firefox、opera、chromeおよびsafariでテスト済み）のサンプル： http://i.stack.imgur.com/wnRCL.png

0
Andhi Irawan