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

Question

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

forked from some_repository

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

Answer 2

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

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

通过使用“ ::-webkit-scrollbar-thumb”上的height属性，我能够部分控制滚动拇指的高度。 看来是最低高度值，我无法在其下设置新值。

也许这会有所帮助。