怎么制作:: - webkit-scrollbar-thumb更小？

Question

我通过CSS3自定义滚动条。我不知道，如何使滚动条拇指更小（更短）。宽度或高度不起作用。有人能帮助我吗？

#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的{​​{1}}的高度

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

Answer 2

这对我有用，关键是“ ::-webkit-scrollbar / width”

::-webkit-scrollbar-track
{
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  background-color: #F5F5F5;
}

::-webkit-scrollbar
{
  width: 4px !important;
  background-color: #F5F5F5;
}

::-webkit-scrollbar-thumb
{
  background-color: $apple-gray;
}