css 中的滚动条拇指高度

Question

scroll thumb的高度是根据可滚动区域设置为默认高度的吗？如果没有，我可以设置滚动条拇指高度吗？如果可能怎么办？我尝试通过以下方式进行。

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 */ }

Source

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，但要注意它不会滚动到最后，因为透明space。

css 中的滚动条拇指高度

Scrollbar thumb height in css

html

css

angular-ui-bootstrap