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

Question

単一のノードから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

追加された 06 2月 2012 〜で 11:41 著者 Justin John 編集された 30 7月 2012 〜で 07:47

ビュー: 3

源

ru fr es pt de ar

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

追加された 06 2月 2012 〜で 11:53 著者 Paul D. Waite

源

私はまた、クロム16を使用している、カスタムスクロールバーのスタイルはまったく適用されません

追加された 06 2月 2012 〜で 12:01, 著者 Justin John, 源

私はセレクタで修正を行った[ jsfiddle.net/uVGKr/2 ]を参照してください。しかし、CSS値の初期値は期待通りに機能しません。なぜなら、Webkitスクロールを正常にオーバーライドする必要があるすべてのフィールドに「初期値」を与えると、Webkitスクロールバーが消えてしまうからです。しかし、通常のスクロールバーはWebkitのスクロールバーを置き換えられませんでした。スクロールバー領域の背景は透明です。[ jsfiddle.net/uVGKr/3 ]を参照してください。

追加された 08 2月 2012 〜で 02:11, 著者 Justin John, 源

良い主よ、はい、私はあなたが initial について何を意味しているのかを見ています。それは奇妙です - overflow：hidden; の表のセルでうまくいきましたが、テキストエリアの場合はそうではないようです。次に、：not（）ソリューションは、：not（）内のクラスセレクタでうまくいくように見えます。

追加された 08 2月 2012 〜で 03:54, 著者 Paul D. Waite, 源

これは良い答えだと思うが、 jsfiddle.net/uVGKr と jsfiddle.net/uVGKr/3 がChrome 22で壊れているように見えます。デフォルトのスクロールバーが表示されるはずの空白が表示されています。

追加された 11 10月 2012 〜で 03:02, 著者 Tyler, 源

著者 Yogu · Answer 1 · 2012-02-06T11:44Z

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

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

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

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

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

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

/* ... */

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

著者 me_digvijay · Answer 2 · 2012-02-06T11:54Z

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