Несколько пользовательских полос прокрутки

Question

Все, что я хочу знать, это то, что на одной и той же странице можно создать несколько настраиваемых полос прокрутки -webkit. Я делаю некоторые цвета divs, например, один div имеет зеленый текст и изображения, а другой синий и т. Д. . Поэтому я хотел бы сделать обычную полосу прокрутки для каждого div, чтобы она соответствовала цвету.

Q1: Возможно ли это?

Q2: Если да, то как бы я это сделал?

Я подумал об одном решении, но я думаю, что это немного громоздко. Одним из решений может быть создание каждого div, содержащего iframe, а затем создание отдельных страниц с уникальными полосами прокрутки, но я не знаю, будет ли это работать.

Answer 1

Конечно, вы можете - просто предварять скроллбара псевдо-классы с предназначенными селекторов, то есть:

::-webkit-scrollbar-track { 
    background-color: #333; 
} 

/* Override styles for <div>s, for example */ 
div::-webkit-scrollbar-track { 
    background-color: #b13131; 
} 

Я сделал простой пример вы здесь - http://jsfiddle.net/teddyrised/Nsz93/

Answer 2

Возможно использование либо плагина jquery, либо простого стиля полосы прокрутки w/css. Это можно сделать в webkit и т. Д.

::-webkit-scrollbar { 
    width: 12px; 
} 

::-webkit-scrollbar-track { 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px; 
} 

::-webkit-scrollbar-thumb { 
    border-radius: 10px; 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
} 

http://jsfiddle.net/jeffpowrs/nEkPw/

http://css-tricks.com/custom-scrollbars-in-webkit/

Answer 3

Вы также можете применить эти правила по идентификатору элемента. Скажем, полоса прокрутки div должна быть оформлена с идентификатором «myDivId». Затем вы можете сделать следующее. Таким образом, вы можете использовать разные стили для полос прокрутки разных элементов.

#myDivId::-webkit-scrollbar { 
    width: 12px; 
} 

#myDivId::-webkit-scrollbar-track { 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px; 
} 

#myDivId::-webkit-scrollbar-thumb { 
    border-radius: 10px; 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
} 

http://jsfiddle.net/QcqBM/516/