html - 如何使::-webkit-scrollbar-thumb 变小？

Question

我使用 CSS3 自定义滚动条。而且我不知道，如何使 scrollbar-thumb 更小(更短)。宽度或高度不起作用。谁能帮帮我？

#parent {
  width: 300px;
  height: 300px;
  padding: 20px;
  overflow: auto;
}

#child {
  width: 250px;
  height: 1000px;
  margin: 0 auto;
  border: 2px solid #8c1b21;
}

#parent::-webkit-scrollbar {
    width: 15px;
    background-color: #B79889;
    border-radius: 5px;
    box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}

#parent::-webkit-scrollbar-thumb {
    background-color: #8c1b21;
    border-radius: 5px;
}

<div id="parent">
  <div id="child"></div>
</div>

Answer 1

拇指的高度取决于应用 scroll 的 div 的高度

#parent {
  width: 300px;
  height: 300px;
  padding: 20px;
  overflow: auto;
}

#child {
  width: 250px;
  height: 4000px;
  margin: 0 auto;
  border: 2px solid #8c1b21;
}

#parent::-webkit-scrollbar {
    width: 10px;
    background-color: #B79889;
    border-radius: 5px;
    box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}

#parent::-webkit-scrollbar-thumb {
    background-color: #8c1b21;
    border-radius: 5px;
}

<div id="parent">
  <div id="child"></div>
</div>