更改滚动条高度答案

【问题标题】：Change scrollbar height更改滚动条高度
【发布时间】：2018-11-21 21:13:36
【问题描述】：

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

我试过了

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

或者

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

但是什么都没发生

谢谢

【问题讨论】：

你在其他浏览器上试过了吗？
你可能需要使用某种滚动条插件
我不能使用插件来做到这一点，我认为不可能改变高度
希望对您有所帮助stackoverflow.com/questions/10980822/…
不抱歉，我没有解决方案

标签： css

【解决方案1】：

这是可能的。您需要了解的第一件事是滚动条的结构。这里我参考了一张来自css-tricks的图片。

要实现你想要的，你需要：

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

.page { 
  position: relative;
  width: 100px; 
  height: 200px;
}

.content {
   width: 100%;
}

.wrapper {
  position: relative;
  width: 100%; 
  height: 100%; 
  padding: 0; 
  overflow-y: scroll; 
  overflow-x: hidden; 
  border: 1px solid #ddd;
}

.page::after { 
  content:'';
  position: absolute;
  z-index: -1;
  height: calc(100% - 20px);
  top: 10px;
  right: -1px;
  width: 5px;
  background: #666;
}

.wrapper::-webkit-scrollbar {
    display: block;
    width: 5px;
}
.wrapper::-webkit-scrollbar-track {
    background: transparent;
}
    
.wrapper::-webkit-scrollbar-thumb {
    background-color: red;
    border-right: none;
    border-left: none;
}

.wrapper::-webkit-scrollbar-track-piece:end {
    background: transparent;
    margin-bottom: 10px; 
}

.wrapper::-webkit-scrollbar-track-piece:start {
    background: transparent;
    margin-top: 10px;
}

<div class="page">
<div class="wrapper">
<div class="content">
a<br/>
a<br/>
a<br/>
a<br/>a<br/>
a<br/>
a<br/>
a<br/>
a<br/>
a<br/>
a<br/>
a<br/>
a<br/>a<br/>
a<br/>
a<br/>
a<br/>
a<br/>
a<br/>
a<br/>
a<br/>
a<br/>a<br/>
a<br/>
a<br/>
a<br/>
a<br/>
a<br/>
a<br/>
a<br/>
a<br/>a<br/>
a<br/>
a<br/>
a<br/>
a<br/>
</div>
</div>
</div>

【讨论】：

感谢您的发现！另一种不涉及伪元素的方法是在-webkit-scrollbar-track 上使用背景图像和线性渐变。

【解决方案2】：

您需要做的就是：

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

【讨论】：

【解决方案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
}

【讨论】：