如何向下移动滚动条

Question

所以我有一个使用 CSS 设置样式的滚动条。

::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: #F5F5F5;
}

::-webkit-scrollbar
{
width: 12px;
background-color: #F5F5F5;
padding-top: 60px; /*doesn't work*/
}

::-webkit-scrollbar-thumb
{
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #555;
}

很遗憾，'padding-top: 60px;' 不起作用。是否可以将其向下移动 60px？如果是这样，我将如何去做呢？谢谢！ :)

编辑：Ascii 图像来解释我想要发生的事情。

_____________________
|       60px gap -> _|
|                  | |
|                  |||
|__________________|_|

Answer 1

您不能为滚动条设置内边距。
您可以使用 'fake' 容器并使其可滚动，绝对定位 60px 在顶部：

.wrapper {
   position: absolute; 
   overflow-y:auto;
   left:0;
   right:0;
   top:60px; 
   background:gold;
   padding:20px;
}

参见working demo here。

如何向下移动滚动条

How to move the scrollbar down

css

webkit

positioning

scrollbar