CSS 中的滚动条拇指高度

Question

滚动滑块的高度是否根据可滚动区域设置为默认值？如果没有，我可以设置滚动条拇指高度吗？如果可以怎么办？我尝试按照以下方式进行操作。

body::-webkit-scrollbar-thumb {
  background-color: darkgrey;
  outline: 1px solid slategrey;
  height: 5px;
}

但对页面没有影响。请帮忙。预先感谢。

Answer 1

我不这么认为，拇指的高度基于内容的大小，您可以更改

::-webkit-scrollbar

内的宽度，但高度将始终基于内容。

::-webkit-scrollbar              { /* 1 */ }
::-webkit-scrollbar-button       { /* 2 */ }
::-webkit-scrollbar-track        { /* 3 */ }
::-webkit-scrollbar-track-piece  { /* 4 */ }
::-webkit-scrollbar-thumb        { /* 5 */ }
::-webkit-scrollbar-corner       { /* 6 */ }
::-webkit-resizer                { /* 7 */ }

来源

Answer 2

如果您想在滚动时为滚动条拇指设置固定的最小高度。我们可以像下面这样设置：

::-webkit-scrollbar-thumb {
    min-height: 40px;
   }

Answer 3

你可以这样做：

::-webkit-scrollbar-thumb{
    background-color: transparent;
    border-top: 60px solid green /*or any height and color you want*/;
}

这将使高度恒定，值为 60px，但要注意，由于透明空间，它无法滚动到最末尾。

Answer 4

别浪费你的时间了，我已经在这件小事上浪费了。

出于可访问性的原因，您只能更改滑块和轨道的宽度和颜色，而不能更改滚动条的高度。 拇指代表可滚动区域内的当前位置。当您滚动时，它会在轨道内移动。拇指通常也可以拖动。

来源 Chrome 官方文档 自述文件

还有一个好消息要告诉你， 如果您增加滚动条所在元素的高度，则滚动条高度的拇指将自动减小。因此，滚动条的高度取决于滚动条所在元素的高度。 我希望我能为你的生活增添一些价值。美好的一天，快乐的编码生活！