'How to make ::-webkit-scrollbar-thumb smaller?

I customize scrollbar by CSS3. And I don't know, how to make scrollbar-thumb smaller (shorter). Width or height don't work. Can anybody help me?

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


Solution 1:[1]

Height of thumb depends on the height of the div where you are applying scroll

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

Solution 2:[2]

I've come across a lot of methods for this very problem; the usual answer is create a div, make a custom scroll bar (don't), or don't bother. This is a solution I found previously to solve this problem:

  border-top: 15px solid transparent;
  border-bottom: 35px solid transparent;
  background-clip: padding-box;

Basically surround the track with transparent thicc borders, ie. shorten the track.

Solution 3:[3]

This works for me, "::-webkit-scrollbar /width" is the key

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Pawan Kumar
Solution 2 muspi merol
Solution 3 Tánh

Related Questions