如何更改滚动条拇指的高度？答案

【问题标题】：How to change the height of a scrollbar thumb?如何更改滚动条拇指的高度？
【发布时间】：2018-11-16 06:07:09
【问题描述】：

有没有办法将滚动条的高度更改为固定高度并相应地更改滚动的内容量？这是我当前的 css 代码。

  ::-webkit-scrollbar {
    width: 30px;
}

/* Track */
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px #003B7C; 
    border-radius: 10px;
    background: white;
    border-left: 8px solid rgba(255,255,255,0);
    border-right: 8px solid rgba(255,255,255,0);
    background-clip: content-box;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: linear-gradient(to right,#003B7C, #00538B, #83BBE6); 
    border-radius: 8px;
}

【问题讨论】：

标签： javascript html css scrollbar

【解决方案1】：

滚动条高度与“::-webkit-scrollbar”无关，它与内容高度有关。您必须为您的内容提供“max-height”和“overflow-y”。您不能为垂直滚动条定义高度。这取决于内容大小。

假设你有这样的事情：

<div class="wrapper">
  <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repellat adipisci itaque beatae quisquam corporis. Eos praesentium temporibus autem assumenda enim aspernatur culpa, esse quam, optio, molestias dolor sapiente vel deserunt!</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit provident illo placeat nemo sint dolores quod temporibus, doloremque repudiandae, cum architecto, nostrum aut ipsum atque. Aspernatur autem error unde praesentium!</p>
</div>

如果你这样写 CSS：

.wrapper {
    width: 300px;
    max-height: 200px;
    overflow-y: scroll;
}

你可以指定高度。

看看这个codepen。

【讨论】：

我明白了。但是有没有办法通过保持滚动条拇指（而不是轨道）的高度固定来改变滚动内容量？
不，据我所知，没有办法做到这一点。

【解决方案2】：

https://jsfiddle.net/j6gmobuz/6/

.visible-scrollbar::-webkit-scrollbar-thumb {
    background-color: #acacac;
    border-radius: 50px;
    height: 120px;
}

我可以通过简单地使用 "::-webkit-scrollbar-thumb" 上的 height 属性来部分控制滚动拇指的高度。它似乎是我无法在其下方设置新值的最小高度值。

也许这会有所帮助。

【讨论】：