Есть ли способ сделать прозрачную пользовательскую дорожку прокрутки в браузерах webkit?

Я пытаюсь создать полосы прокрутки, которые появятся на DIV в дизайне, над которым я работаю. Он webkit только так понял, что я мог бы получить довольно просто с CSS, а не с плагинами.

К сожалению, я попал в серьезную проблему. Дизайн требует, чтобы полосы прокрутки перекрывали контент с прозрачным эффектом, подобно OS X Mountain Lion/iOS.

Когда пользовательские стили применяются к полосе прокрутки, но он изменяет размер содержимого, чтобы он соответствовал полосе прокрутки. Мне удалось определить размер содержимого, чтобы в инспекторе он теперь показывал его под полосой прокрутки, но я не могу показаться сделайте прозрачную дорожку прокрутки.

Я попытался применить их как к областям:: webkit-scrollbar, так и:: - webkit-scrollbar-track:

фон: прозрачный
прозрачный цвет фона с rgba
фоновое изображение с прозрачностью

Нет, похоже, работает. Прежде чем я сдадусь и попробую пользовательское решение прокрутки JavaScript, подумал, что я увижу, есть ли у кого-нибудь ответ.

* {
  list-style:none;
  margin:0;
  padding:0;
}
body {
  padding:20px;
}
#content {
  background:#333;
  height:400px;
  padding:1px;
  width:398px;
}
#content li {
  background:#666;
  height:100px;
  margin-bottom:10px;
  width:400px;
}
.scrollable-content {
  overflow-x:hidden;
  overflow-y:scroll;
}
.scrollable-content::-webkit-scrollbar {
  background:transparent;
  width:30px;
}
.scrollable-content::-webkit-scrollbar-track {
  background:transparent;
}
.scrollable-content::-webkit-scrollbar-thumb {
  background:#999;
}

<ol class="scrollable-content" id="content">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ol>

Ответ 1