在UL中是否可能设置CSS垂直滚动条的左/右边距？

Question

在UL中是否可能设置CSS垂直滚动条的左/右边距？

92

是否可能在滚动条项或滚动条轨道周围添加填充或边距？我已经尝试过了，只能得到上/下填充。将填充添加到UL对滚动条没有影响。在滚动条上使用负边距也没有效果。有什么好的想法吗？JS Fiddle 这里。

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

- sandraqu

8个回答

19

我使用滚动条拇指上的border-right创建了一个margin-right效果：

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-thumb {
  background: red;
  border-right: 4px white solid;
  background-clip: padding-box;
}

滚动条的宽度似乎为4像素，右侧有4像素的外边距。

这里还有一个示例：https://jsfiddle.net/4kgvL93h/3/

- Jordan Daniels

8

该方法不支持圆角边框。 - Arnold Zahrneinder

7

你可以为滚动条轨道添加外边距；

#someID ::-webkit-scrollbar-track{
  border-radius: 15px;
   margin: 40px;
  box-shadow: inset 7px 10px 12px #f0f0f0;
  
 }

- Usama Majid

6

这似乎只适用于顶部和底部的边距。 - bzk

6

此解决方案可在内容和滚动条之间创建真实空间（如果可滚动元素没有透明背景）。对于窗口滚动条非常有用。

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

- Henry Brewer

6

只需使用 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>

- Estail Se

我在你的示例中没有看到期望的效果。 - Lazar Ljubenović

在 CSS 中将 margin-block 从 15px 和 25px 更改为 0px，以查看滚动条的效果。 - Estail Se

4

另一个重要的属性是添加垂直或水平边距：

::-webkit-scrollbar-track {
  margin: 0 30px;
}

- Dror Bar

1

使用 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>

- Rahul Rathod

0

最简单的方法就是给可滚动的div添加一个外部div，并在外部div上添加一些右边的内边距。

- William Rozario

嗨威廉，如果你能创建一个示例，那会更容易理解。 - undefined

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Bora Alp Arat · Accepted Answer

以下是一个示例，基本上不要添加边距或填充，只需增加滚动区域的宽度/高度，减少拇指/轨道的宽度和高度。

引用自如何自定义自定义滚动条？

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>