Question

是否可以在滚动条项目或滚动条轨道周围添加填充或边距？我试过了，只能填充顶部/底部。向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);

Answer 1

你可以在那里看到一个例子（http://jsfiddle.net/6KprJ/1/），基本上忘记在那里添加边距或填充，只需增加滚动区域的宽度/高度，并减小拇指/轨道的宽度高度。

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

Answer 2

此解决方案在内容和滚动条之间创建了一个真正的空间（如果可滚动元素没有透明背景）。对窗口滚动条很有用。

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

Answer 3

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

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

Answer 4

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

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

Answer 5

我在滚动条缩略图上使用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/

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

5 个答案: