如何更改滾動條拇指的高度？

Question

有什么方法可以將滾動條的高度更改為固定高度，並相應地更改滾動內容的數量？ 這是我當前的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;
}

Answer 1

滾動條的高度與“ ::-webkit-scrollbar”無關，它與內容的高度有關。 您必須為內容指定“最大高度”和“溢出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屬性，我能夠部分控制滾動拇指的高度。 它似乎是最小高度值，我無法在其下設置新值。

也許這會有所幫助。