web-dev-qa-db-ja.com

CSSスクロールバースタイルのクロスブラウザ

CSSスクロールバースタイルのクロスブラウザをどのように定義できますか？私はこのコードをテストしました。それはIEとoperaでのみ動作しますが、Chrome、SafariとFirefoxでは失敗しました。

<style type="text/css">
<!--    
body {
    scrollbar-face-color: #000000;
    scrollbar-shadow-color: #2D2C4D;
    scrollbar-highlight-color:#7D7E94;
    scrollbar-3dlight-color: #7D7E94;
    scrollbar-darkshadow-color: #2D2C4D;
    scrollbar-track-color: #7D7E94;
    scrollbar-arrow-color: #C1C1D1;
}
-->
</style>
cssscrollbar
155
yuli chika

スクロールバーのCSSスタイルは、マイクロソフトの開発者によって発明された奇妙なものです。これらはCSSのW3C標準の一部ではないため、ほとんどのブラウザはこれらを無視します。

113
Till Helge

Webkitのスクロールバーのサポートは 非常に洗練された です。このCSSは、薄い灰色のトラックと濃い親指で、非常に最小限のスクロールバーを表示します。

::-webkit-scrollbar
{
  width: 12px;  /* for vertical scrollbars */
  height: 12px; /* for horizontal scrollbars */
}

::-webkit-scrollbar-track
{
  background: rgba(0, 0, 0, 0.1);
}

::-webkit-scrollbar-thumb
{
  background: rgba(0, 0, 0, 0.5);
}

この答え は追加情報の素晴らしい情報源です。

142
Drew Noakes

jScrollPane はクロスブラウザのスクロールバーに対する優れた解決策で、見栄えがよくなります。

31
Hussein

nanoScrollerJS を使うだけです。私はいつも使っています….

ブラウザの互換性：
  • IE7 +
  • Firefox 3以降
  • クロム
  • サファリ4+
  • オペラ11.60+
モバイルブラウザのサポート：
  • iOS 5以降（iPhone、iPad、iPod Touch）
  • iOS 4（ポリフィル付き）
  • Android Firefox
  • Android 2.2/2.3ネイティブブラウザ（polyfill付き）
  • Android Opera 11.6（ポリフィル付き）

ドキュメンテーションからのコード例

  1. マークアップ - プラグインを機能させるには、次のタイプのマークアップ構造が必要です。

    ...ここに内容...
11
Footniko

IE6では、これらのプロパティを使用してスクロールバーをカスタマイズすることはできません。上記にリンクされているChris Coyierの記事では、スクロールバーをカスタマイズするためのWebkit独自のCSSのオプションについて詳しく説明しています。

完全にカスタマイズできるクロスブラウザソリューションが本当に必要な場合は、JSを使用する必要があります。これはFaceScrollと呼ばれるニースプラグインへのリンクです： http://www.dynamicdrive.com/dynamicindex11/facescroll/index.htm

1
DMTintner

これを試してみると非常に使いやすく、IEとSafariおよびFFでテストされ、正常に機能し、多くのdivを必要とせずにidを追加するだけで正常に機能します。 JsファイルとCssファイルをリンクした後。 FaceScrollカスタムスクロールバー

それが役に立てば幸い

Editステップ1：ページのセクションに以下のスクリプトを追加します。

<link href="general.css" rel="stylesheet" type="text/css">

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery.ui.touch-punch.min.js"></script>

<script type="text/javascript" src="facescroll.js"></script>
<script type="text/javascript">
    jQuery(function(){ // on page DOM load
        $('#demo1').alternateScroll();
        $('#demo2').alternateScroll({ 'vertical-bar-class': 'styled-v-bar', 'hide-bars': false });  
    })
</script>

ステップ2：次に、ページのBODYで、以下のサンプルHTMLブロックをページに追加します。

<p><b>Scrollbar (default style) shows onMouseover</b></p>

<div id="demo1" style="width:300px; height:250px; padding:8px; background:lightyellow; border:1px solid gray; resize:both; overflow:scroll">

From Wikipedia- Gunpowder, also known since in the late 19th century as black powder, was the first chemical explosive and the only one known until the mid 1800s.[2] It is a mixture of sulfur, charcoal, and potassium nitrate (saltpeter) - with the sulfur and charcoal acting as fuels, while the saltpeter works as an oxidizer.[3] Because of its 
</div>

<br />

<p><b>Scrollbar (alternate style), always shown</b></p>

<div id="demo2" style="width:400px; height:130px; padding:10px; padding-right:8px; background:lightyellow; border:1px solid gray; overflow:scroll; resize:both;">

From Wikipedia- Gunpowder, also known since in the late 19th century as black powder, was the first chemical explosive and the only one known until the mid 1800s.[2] It is a mixture of sulfur, charcoal, and potassium nitrate (saltpeter) - with the sulfur and charcoal acting as fuels, while the saltpeter works as an oxidizer.[3] Because of its 
</div>
0
Yousef Altaf