cssscroll

Styling ::-webkit-scrollbar-track not working

I'm trying to style the track of the scroll bar. Whenever I style the track:

 div::-webkit-scrollbar-track {
    background-color: blue;
 }

Nothing changes.

Whenever I style the scrollbar:

div::-webkit-scrollbar {
    background-color: blue;
}

The entire scroll bar is blue, no visible thumb

What am I missing here?

Edit:

I'm working in Chrome. What's odd is that the scroll bars in all my overflow containers just started showing up. Before they were invisible and the scroll thumb would only appear when hover or scrolling (can't remember which, but it definitely wasn't always there). Firefox seems to be giving the desired behavior.

Did something change with Chrome scrollbars lately?

Solution

  • Try the following snippet for styling your scrollbar.

    Note: This only works on -webkit browsers like chrome, safari because there are not W3C standard for CSS and therefore most browsers just ignore them.

    div {
  width: 400px;
  height: 150px;
  overflow: auto;
}

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

div::-webkit-scrollbar {
  width: 12px;
  background-color: #F5F5F5;
}

div::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
  background-color: #555;
}
    <div>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc hendrerit, nunc ut porta euismod, purus leo suscipit ante, quis hendrerit sem velit ut tellus. Aenean justo lorem, viverra tristique malesuada quis, rhoncus sodales turpis. Donec a tempus felis.
  Morbi faucibus eros nec leo facilisis lacinia. Nam at erat ac augue semper ultricies vitae nec erat. Donec et dapibus felis, vitae placerat magna. Aliquam non magna nec orci scelerisque lobortis.
  <br><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc hendrerit, nunc ut porta euismod, purus leo suscipit ante, quis hendrerit sem velit ut tellus. Aenean justo lorem, viverra tristique malesuada quis, rhoncus sodales turpis. Donec
  a tempus felis. Morbi faucibus eros nec leo facilisis lacinia. Nam at erat ac augue semper ultricies vitae nec erat. Donec et dapibus felis, vitae placerat magna. Aliquam non magna nec orci scelerisque lobortis.
</div>