UL에서 왼쪽/오른쪽으로 CSS 수직 스크롤 바 패딩이 가능합니까?

Question

스크롤바 항목이나 스크롤바 트랙 주위에 여백이나 여백을 추가 할 수 있습니까? 나는 시도하고 패딩 가기/하단에만 얻을 수 있습니다. UL에 패딩을 추가해도 스크롤바에는 아무런 영향을 미치지 않습니다. 스크롤 바의 음수 여백은 아무 효과가 없습니다. 아이디어? JS Fiddle here.

::-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); 

Answer 1

당신은 스크롤 영역의 너비/높이를 증가, 거기에 기본적으로 마진이나 패딩을 추가하는 것을 잊지, (http://jsfiddle.net/6KprJ/1/) 거기에 예를보고, 엄지 손가락/트랙의 폭 높이를 줄일 수 있습니다.

은 (스크롤 할 수있는 요소가 투명한 배경이없는 경우)이 솔루션은 컨텐츠와 스크롤 막대 사이의 실제 공간을 확보 how to customise custom scroll?

::-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; 
} 

Answer 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 
}