Возможно ли использовать вертикальную полосу прокрутки CSS влево/вправо в UL?

Можно ли добавить прописку или маржу вокруг элемента прокрутки или полосы прокрутки? Я пробовал и могу получить только верхнюю/нижнюю область. Добавление прокладки к UL не влияет на полосу прокрутки. Отрицательные поля на полосе прокрутки не влияют. Идеи? JS Fiddle здесь.

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

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

::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: rgba(255,0,0,0.8); 
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(255,0,0,0.4);

Ответы

Ответ 1

Вы можете увидеть пример там (http://jsfiddle.net/6KprJ/1/), в основном забудьте добавить маржу или дополнение туда, просто увеличьте ширину/высоту области прокрутки и уменьшите высоту ширины большого пальца/дорожки.

Цитата из как настроить пользовательский прокрутка?

::-webkit-scrollbar {
    width: 14px;
    height: 18px;
}
::-webkit-scrollbar-thumb {
    height: 6px;
    border: 4px solid rgba(0, 0, 0, 0);
    background-clip: padding-box;
    -webkit-border-radius: 7px;
    background-color: rgba(0, 0, 0, 0.15);
    -webkit-box-shadow: inset -1px -1px 0px rgba(0, 0, 0, 0.05), inset 1px 1px 0px rgba(0, 0, 0, 0.05);
}
::-webkit-scrollbar-button {
    width: 0;
    height: 0;
    display: none;
}
::-webkit-scrollbar-corner {
    background-color: transparent;
}

Ответ 2

Это решение создает реальное пространство между содержимым и полосой прокрутки (если прокручиваемый элемент не имеет прозрачного фона). Полезно для оконных полос прокрутки.

.scroll {overflow:auto;}
.scroll::-webkit-scrollbar {
    width:16px;
    height:16px;
    background:inherit;
}
.scroll::-webkit-scrollbar-track:vertical {
    border-right:8px solid rgba(0,0,0,.2);
}
.scroll::-webkit-scrollbar-thumb:vertical {
    border-right:8px solid rgba(255,255,255,.2);
}
.scroll::-webkit-scrollbar-track:horizontal {
    border-bottom:8px solid rgba(0,0,0,.2);
}
.scroll::-webkit-scrollbar-thumb:horizontal {
    border-bottom:8px solid rgba(255,255,255,.2);
}
.scroll::-webkit-scrollbar-corner,
    .scroll::-webkit-resizer {background:inherit;
    border-right:8px solid rgba(255,255,255,.2); //optional
    border-bottom:8px solid rgba(255,255,255,.2); //optional
}