更改滚动条高度

Question

我想知道是否可以像这张图片一样更改滚动条高度：

我试过

::-webkit-scrollbar {max-height: 50%; height: 50%;}

或者

::-webkit-scrollbar-track {max-height: 50%; height: 50%;}

但没有发生任何事情

感谢

Answer 1

您需要做的是：

::-webkit-scrollbar-track {
    margin-top: 10px;
    margin-bottom: 10px;
    .
    .
    .
}

Answer 2

有可能。 您需要了解的第一件事是滚动条的结构。在这里，我引用了css-tricks的图片。

要实现您想要的目标，您需要：

• 更改5（滚动条拇指）开始滚动和停止滚动的位置
• 伪造一个滚动轨道而不是3。

https://example.com/order/customerorders

[Route("/api/controller/saveorder")]
public async Task<IActionResult> SaveOrder(SaveOrderModel model)

Answer 3

滚动条高度的默认代码

::-webkit-scrollbar-button {
  width: 0px; //for horizontal scrollbar
  height: 0px; //for vertical scrollbar
}

同时增加两个值的宽度和高度以调整滚动条的高度

-----------------
|              ||
|              ||
|              ||
|              ||
|              ||
|              ||
|______________||

如果要减小滚动条的高度，请使用

::-webkit-scrollbar-button {
  width: 50px; //for horizontal scrollbar
  height: 50px; //for vertical scrollbar
}