0

Lately, I was in a situation, where I had to style the scrollbar thumb. Every styling was going good, except the height one. Setting the height and max-height didn't have at any effect on the scroll bar at all. I tried setting a fixed height in px for the DOM element, still no changes at all...

Then, I came through this post, which says that setting scrollbar thumb height is not possible because its height of the scrollbar is always relative to the content of the DOM element.

But here is a live example of Google using the max-height property. Can anyone tell, what's going on here?

Meanwhile, my code is:

::-webkit-scrollbar {
    width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
    background: rgb(0, 0, 0, 0); 
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: rgb(var(--bg-80)); 
    height: 100px;
    border-radius: 8px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: rgb(var(--bg-100)); 
}
Satyam Mishra
  • 169
  • 1
  • 9

0 Answers0