Custom Scrollbar not working on Mobile (Chrome)

Question

We are working on a markup with customized scrollbars. For this task we use ::-webkit.

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

::-webkit-scrollbar-track {
  border-radius: 0px;
  background-color: #bfbfbf;
}

::-webkit-scrollbar-thumb {
  background-color: rgb(255,51,0);
  border-radius: 0;
}

Is working great on desktop devices (chrome)... But on Android Chrome nothing happens. Is this not working on Mobile? Any workaround or other solution?

Thanks!

No, sorry. This is not working. also tried with {background-color: rgb(255,51,0) !important; } — Andri Huder, Apr 03 '20 at 09:45
Does this answer your question? [Make scrollbar visible in mobile browsers](https://stackoverflow.com/questions/22907777/make-scrollbar-visible-in-mobile-browsers) — Luka, Apr 03 '20 at 09:55

score 2 · Answer 1 · answered Apr 10 '21 at 06:01

I've been having the same problem... So far, the only explanation I've been able to find is that, the custom scrollbars works only if the body has position: absolute.

I don't like this solution as it affects some other features in my site, but unfortunately, there isn't any other way I've been able to show custom scrollbars in mobile...

I'm not sure why it is so... Should be simple enough, but for some reason, it's too complicated!

Custom Scrollbar not working on Mobile (Chrome)

1 Answers1