単一のノードからCSSプロパティ "-webkit-scrollbar"を削除できますか?

CSSプロパティ :: - webkit-scrollbar を単一のHTML要素から削除するにはどうすればよいですか?

私のCSSファイルでは、私はこのコードを持っています:

::-webkit-scrollbar {
    width:  6px;
    height: 6px;
    background-color:transparent;
}
::-webkit-scrollbar-track {
    background-color:transparent;
    width: 6px;
}
::-webkit-scrollbar-track-piece  {
    background-color: blue;
}
::-webkit-scrollbar-thumb {    
    background-color: #d4dee8;
    width: 6px;
}

すべてのスクロールバーをWebkitスクロールバーで置き換えます。しかし、私はWebkitスクロールバーが必要ない2つの場所がありますが、代わりに通常のスクロールバーが必要です。

HTMLファイル:

<td class="viewDialogLabel" height="21" style="width:156px;padding:0px"> 
    <!-- Inner elements --->
</td>

ここでは、クラス viewDialogLabel を通常のスクロールバーに変更する必要があります。

この効果をどうやって得るのですか?

7

3 答え

WebKitは便利なCSS値 initial をサポートしています。ページにスタイルが適用されていない場合の値です。

このように設定した :: - webkit-scrollbar の値をリセットすることができます:

.viewDialogLabel::-webkit-scrollbar {
    width: initial;
    height: initial;
    background-color:initial;
}
.viewDialogLabel::-webkit-scrollbar-track {
    background-color:initial;
    width: initial;
}
.viewDialogLabel::-webkit-scrollbar-track-piece  {
    background-color: initial;
}
.viewDialogLabel::-webkit-scrollbar-thumb {    
    background-color: initial;
    width: initial;
}

See http://jsfiddle.net/uVGKr/


WebKitは、 :not()セレクタもサポートしています。だから私は元のCSSに次のような改正がカスタムスクロールバーがそのテーブルセルに適用されないようにするだろうと考えていたでしょう:

:not(.viewDialogLabel)::-webkit-scrollbar {
    width:  6px;
    height: 6px;
    background-color:transparent;
}
:not(.viewDialogLabel)::-webkit-scrollbar-track {
    background-color:transparent;
    width: 6px;
}
:not(.viewDialogLabel)::-webkit-scrollbar-track-piece {
    background-color: blue;
}
:not(.viewDialogLabel)::-webkit-scrollbar-thumb {
    background-color: #d4dee8;
    width: 6px;
}

しかし、それは私のChromeでは機能しません16 - カスタムスクロールバーのスタイルはまったく適用されません( http ://jsfiddle.net/uVGKr/1/ )。これらのセレクタを組み合わせることができない場合、またはWebKitのバグである場合は、私が何か間違っているかどうかはわかりません。

As per your suggested edit removing the td selectors from the CSS, this seems to be working in Chrome 24 at least: http://jsfiddle.net/uVGKr/2/

4
追加された
私はまた、クロム16を使用している、カスタムスクロールバーのスタイルはまったく適用されません
追加された 著者 Justin John,
私はセレクタで修正を行った[ jsfiddle.net/uVGKr/2 ]を参照してください。しかし、CSS値の初期値は期待通りに機能しません。なぜなら、Webkitスクロールを正常にオーバーライドする必要があるすべてのフィールドに「初期値」を与えると、Webkitスクロールバーが消えてしまうからです。しかし、通常のスクロールバーはWebkitのスクロールバーを置き換えられませんでした。スクロールバー領域の背景は透明です。[ jsfiddle.net/uVGKr/3 ]を参照してください。
追加された 著者 Justin John,
良い主よ、はい、私はあなたが initial について何を意味しているのかを見ています。それは奇妙です - overflow:hidden; の表のセルでうまくいきましたが、テキストエリアの場合はそうではないようです。次に、:not()ソリューションは、:not()内のクラスセレクタでうまくいくように見えます。
追加された 著者 Paul D. Waite,
これは良い答えだと思うが、 jsfiddle.net/uVGKr jsfiddle.net/uVGKr/3 がChrome 22で壊れているように見えます。デフォルトのスクロールバーが表示されるはずの空白が表示されています。
追加された 著者 Tyler,

より正確なセレクタを指定することができます:

.new-scrollbar::-webkit-scrollbar {
  /* ... */
}

次に、 new-scrollbar クラスの要素だけがカスタムスクロールバーを持ちます。

または、特定の要素のプロパティをオーバーライドすることもできます。

.old-scrollbar::-webkit-scrollbar {
  background: none;
}

.old-scrollbar::-webkit-scrollbar-track {
  background: none;
}

/* ... */

また、さまざまなプロパティ/値で試してみてください。

2
追加された
そのことは不可能です。なぜなら、JsファイルとCSSファイルの両方で再構成するのにはかなりの時間がかかるからです。
追加された 著者 Justin John,
2番目のサンプルは役に立ちますか?
追加された 著者 Yogu,

これらの2つの要素からこれらのプロパティを削除する代わりに、これらの2つの要素に対して別々のクラスを指定し、-webkit-scrollbarスタイルを新しいもので上書きすることができます

0
追加された
新しいもので-webkit-scrollbarスタイルを上書きするデモを見せてください。
追加された 著者 Justin John,
ここにあります:#your-id {width:auto;高さ:自動;背景色:なし; }これで、上書きしたいスタイルのタグにこのidを入れることができます
追加された 著者 me_digvijay,
JavaScript - 日本のコミュニティ
JavaScript - 日本のコミュニティ
2 参加者の

日本人コミュニティのjavascript