CSS垂直滚动条在UL中左/右填充可能吗？
CSS垂直滚动条在UL中左/右填充可能吗？
提问于 2014-02-11 01:34:20
是否可以在scrollbar项或scrollbar-track周围添加填充或边距？我已经尝试过了，但只能填充顶部/底部。向UL添加填充对scrollbar没有影响。滚动条上的负边距不起作用。点子？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); 回答 5
Stack Overflow用户
回答已采纳
发布于 2014-02-11 01:50:18
你可以在下面看到一个例子，基本上不需要添加边距或填充，只需增加滚动区域的宽度/高度，减少拇指/轨迹的宽度/高度即可。
引用自how to customise custom scroll?
body {
min-height: 1000px;
font-family: sans-serif;
}
div#container {
height: 200px;
width: 300px;
overflow: scroll;
border-radius: 5px;
margin: 10px;
border: 1px solid #AAAAAA;
}
div#content {
height: 1000px;
outline: none;
padding: 10px;
}
::-webkit-scrollbar {
width: 14px;
}
::-webkit-scrollbar-thumb {
border: 4px solid rgba(0, 0, 0, 0);
background-clip: padding-box;
border-radius: 9999px;
background-color: #AAAAAA;
}<div id="container">
<div id="content" contenteditable>
Click to type...
</div>
</div>
Stack Overflow用户
发布于 2019-12-21 06:25:14
我在scrollbar-thumb上创建了一个右边距效果：
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-thumb {
background: red;
border-right: 4px white solid;
background-clip: padding-box;
}滚动条的宽度为4px，右边距为4px。
这里也有一个难题：https://jsfiddle.net/4kgvL93h/3/
Stack Overflow用户
发布于 2016-02-17 23:02:36
这个解决方案在内容和滚动条之间创建了一个真正的空间(如果可滚动元素没有透明的背景)。对窗口滚动条很有用。
.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
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/21684101
复制相关文章
相似问题