可以在 UL 中向左/向右填充 CSS 垂直滚动条吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21684101/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS vertical scrollbar padding left/right in UL possible?
提问by sandraqu
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.
是否可以在滚动条项或滚动条轨道周围添加填充或边距？我试过了，只能在顶部/底部填充。向 UL 添加填充对滚动条没有影响。滚动条上的负边距无效。想法？ JS小提琴在这里。
::-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);
回答by Bora Alp Arat
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.
你可以在那里看到一个例子（http://jsfiddle.net/6KprJ/1/），基本上忘记在那里添加边距或填充，只需增加滚动区域的宽度/高度，并减少拇指/轨道的宽度高度。
Quoted from 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;
}
回答by Henry Brewer
This solution make a real space between content and scrollbar (if a scrollable element doesn't have a transparent background). Useful for window scrollbars.
此解决方案在内容和滚动条之间留出真正的空间（如果可滚动元素没有透明背景）。对窗口滚动条很有用。
.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
}
回答by Jordan Daniels
I created a margin-right effect using border-right on the scrollbar-thumb:
我在滚动条拇指上使用 border-right 创建了一个 margin-right 效果：
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-thumb {
background: red;
border-right: 4px white solid;
background-clip: padding-box;
}
The scrollbar appears to have width 4px and margin-right 4px.
滚动条的宽度为 4px，边距右侧为 4px。
Here's a fiddle as well: https://jsfiddle.net/4kgvL93h/3/
这里还有一个小提琴：https: //jsfiddle.net/4kgvL93h/3/
回答by Dror Bar
Another important attribute to add vertical or horizontal margin:
添加垂直或水平边距的另一个重要属性：
::-webkit-scrollbar-track {
margin: 0 30px;
}
