UL中的CSS垂直滚动条向左/向右填充可能吗？

Posted 2023-02-21

【中文标题】UL中的CSS垂直滚动条向左/向右填充可能吗？

【英文标题】：CSS vertical scrollbar padding left/right in UL possible?

【发布时间】：2014-03-08 04:35:23

【问题描述】：

是否可以在滚动条项目或滚动条轨道周围添加填充或边距？我试过了，只能得到顶部/底部的填充。向 UL 添加填充对滚动条没有影响。滚动条上的负边距无效。想法？ 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); 

【参考方案1】：

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

【参考方案2】：

你可以看下面的例子，基本上忘记在那里添加边距或填充，只是增加滚动区域的宽度/高度，并减少拇指/轨道的宽度高度。

引自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>

【讨论】：

对于任何想知道的人来说，这里的魔法是background-clip: padding-box，它会导致元素的边框被切断（连同它下面的背景颜色），所以通过将边框设置为完全透明的颜色它将导致与边框宽度匹配的填充效果。如果没有该规则，背景颜色将通过边框可见。

奇怪的是，当您想增加间隙、增加宽度并保留圆形边框时，这不起作用。有什么建议吗？

好吧，这更好一点：::-webkit-scrollbar width: 40px; ::-webkit-scrollbar-thumb border: 12px solid rgba(0, 0, 0, 0); background-clip: padding-box; -webkit-border-radius: 20px; background-color: rgba(0, 0, 0, 0.15);; 真正的遗憾是我无法添加顶部和底部边距。

谢谢@Bora Alp Arat：你是如何获得工作高度的？无论我做什么，甚至复制您的整个代码（仅适用于滚动条），它都不起作用。

@tatsu top and bottom 与其他答案一起使用：***.com/a/59034019/1633985

【参考方案3】：

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

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

【讨论】：

这似乎只应用了顶部和底部边距

【参考方案4】：

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

::-webkit-scrollbar 
  width: 8px;


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

滚动条的宽度似乎是 4px，margin-right 是 4px。

这也是一个小提琴：https://jsfiddle.net/4kgvL93h/3/

【讨论】：

请不要在多个问题中添加the same answer。回答最好的一个并将其余的标记为重复。见Is it acceptable to add a duplicate answer to several questions?

@PaulRoub 会的。我不知道这是不赞成的。谢谢！

此方法不支持边框半径。

【参考方案5】：

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

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

【参考方案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