Я пытаюсь создать полосы прокрутки, которые появятся на 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>