Можем ли мы удалить CSS-свойство "-webkit-scrollbar" из одного узла?

Question

Как я могу удалить свойство 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, вместо этого мне нужны обычные полосы прокрутки.

HTML-файл:

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

Здесь мне нужно изменить класс viewDialogLabel на обычные полосы прокрутки.

Как мне получить этот эффект?

Answer 1

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;
}

См. 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.

КакВ соответствии с вашим предложенным изменением, удаляющим селекторы td из CSS, это похоже на работу в Chrome 24 как минимум: http://jsfiddle.net/uVGKr/2/

Answer 2

Вы можете указать более точный селектор:

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

Тогда только элементы с классом new-scrollbar будут иметь пользовательские полосы прокрутки.

Или вы можете попытаться переопределить свойства в определенных элементах:

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

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

/* ... */

Также попробуйте его с другими свойствами / значениями.

Answer 3

Вместо удаления этих свойств из этих двух элементов вы можете указать отдельный класс или идентификаторы для этих двух элементов и переопределить стили -webkit-scrollbar новыми