How to add left and right padding to ::webkit-scrollbar-thumb?

user_15570950 0
Viewed 2640

Is there a way to replicate YouTube's custom scrollbar?

Desired effect:

yt scrollbar

It seems like ::webkit-scrollbar-thumb has a left and right padding to achieve that effect.

I have tried the following:

* {
  margin: 0;
  padding: 0;
  ::-webkit-scrollbar {
    background: #181818;
    width: 12px;
  }
  ::-webkit-scrollbar-thumb {
    padding: 0 4px; // This was supposed to do the trick
    background: #909090;
    border-radius: 100px;
    &:hover {
      background: #606060;
    }
  }
}

But it doesn't work...

Result:

res

Any ideas how to achieve the desired effect? Thanks in advance.

sass scrollbar css html
1 Answers

You could try faking the padding with background-clip: padding-box and applying a transparent border-right and left.

::-webkit-scrollbar {
  background: #181818;
  width: 20px;
}

 ::-webkit-scrollbar-thumb {
  padding: 0 4px;
  border-right:4px solid transparent;
  border-left:4px solid transparent;
  background: #909090;
  background-clip: padding-box;
  border-radius: 100px;
  &:hover {
    background: #606060;
  }
}

html,
body {
  height: 300%;
}

user_142512210
Related