更改滚动条高度

Question

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

我试过了

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

或者

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

但什么也没发生

---

感谢

原文由 Alex197 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 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>

原文由 jilykate 发布，翻译遵循 CC BY-SA 4.0 许可协议