是否可以在滚动条项目或滚动条轨道周围添加填充或边距?我试过了,只能得到顶部/底部的填充。向 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);
您可以看到下面的示例,基本上忘记在那里添加边距或填充,只需增加滚动区域的宽度/高度,并减少拇指/轨道的宽度高度。
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>
我使用滚动条拇指上的 border-right 创建了一个 margin-right 效果:
::-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/
可以给滚动条轨道添加边距;
#someID ::-webkit-scrollbar-track{
border-radius: 15px;
margin: 40px;
box-shadow: inset 7px 10px 12px #f0f0f0;
}
此解决方案在内容和滚动条之间留出真正的空间(如果可滚动元素没有透明背景)。对于窗口滚动条很有用。
.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
}
添加垂直或水平边距的另一个重要属性:
::-webkit-scrollbar-track {
margin: 0 30px;
}
只需使用margin-block
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px F2F2F2;
border-radius: 0px;
margin-block: 15px;
}
#container{
height:400px;
background-color:white;
overflow-y:scroll;
border-radius:25px;
}
#content{
height:700px;
background-color:yellow;
padding:25px;
}
::-webkit-scrollbar{
width: 5px;
}
/* Track */
::-webkit-scrollbar-track{
box-shadow: inset 0 0 5px F2F2F2;
border-radius: 0px;
margin-block: 25px;
}
/* Handle */
::-webkit-scrollbar-thumb{
background: #8B8B8B;
border-radius: 27px;
border: 4px solid rgba(0, 0, 0, 0);
}
<div id="container">
<div id="content">
<br>
Click to type...
<br>
</div>
</div>
使用
border-radius
,box-shadow
和 background-clip: padding-box
都无法正常工作。
我在需要滚动的 div 顶部创建了一个父 div。并固定父 div 的高度,并将内边距放在子 div 的右侧。这对我的情况很有效。
<div class="parent h-10 overflow-scroll">
<div class="scroll child pr-2">
<!-- CONTENT -->
</div>
</div>
最简单的方法是在可滚动 div 中添加一个外部 div,并在外部 div 上放置一些内边距