可以在UL中向左/向右填充CSS垂直滚动条吗? [英] CSS vertical scrollbar padding left/right in UL possible?

问题描述

是否可以在滚动条项或滚动条轨道周围添加填充或边距?我已经尝试过，只能填充顶部/底部.向UL添加填充对滚动条无效.滚动条上的负边距无效.有想法吗? JS小提琴在这里.

Is it possible to add padding or margin around the scrollbar item or scrollbar-track? I've tried and can only get padding top/bottom. Adding padding to the UL has no effect on scrollbar. Negative margins on scrollbar have no effect. Ideas? 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); 

推荐答案

您可以在那看到一个示例( http ://jsfiddle.net/6KprJ/1/)，基本上忘了在此处添加边距或填充，只是增加了滚动区域的宽度/高度，而减小了拇指/轨迹的宽度高度.

You can see an example over there (http://jsfiddle.net/6KprJ/1/), basically forget adding margin or padding there, just increase the width/height of scroll area, and decrease the width height of thumb/track.

引自如何自定义自定义滚动?

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

这篇关于可以在UL中向左/向右填充CSS垂直滚动条吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！