如何使::-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的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> 

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;
}