Применить границу-радиус к полосам прокрутки с помощью :: - webkit-scrollbar CSS3

Question

Не нужно быть кросс-браузерным в данный момент, просто webkit. Я знаком со способностью стилизации :: - webkit-scrollbar, но как я могу использовать это или javascript, чтобы полосы прокрутки учитывали радиус границы элементов?

У меня есть DIV с радиусом границы:

#tagBox {
    border-radius: 20px;
}
#tagBox::-webkit-scrollbar-??? {
    ???: ???
}

Как я могу заставить полосы прокрутки подчиняться границам радиуса их элемента? Даже если это требует JavaScript. (Я уже пробовал плагин LionBars и jScrollPane, результаты были патетически ошибочными)

Спасибо!

Answer 1

Надеюсь, этот пример поможет вам: http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/overflow-scrollbar-combinations.html

Я думаю, что вы пропустили эти вещи:

::-webkit-scrollbar {
    width: 13px;
    height: 13px;
}
::-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/Sfy9p/3/

Answer 2

Если вы хотите сделать это с помощью JavaScript:

var ss = document.styleSheets[0];
ss.insertRule('::-webkit-scrollbar {width: 13px;height: 13px;}', 0);
ss.insertRule('::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);border-radius: 10px;}', 1);
ss.insertRule('::-webkit-scrollbar-thumb {border-radius: 10px;-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);}', 2);