How to make a scrollbar that doesn't change the page width ? (like on mobile screens)

Question

I would like to have a scrollbar that doesn't change the page width. On a desktop screen the scrollbar is next to the page content, but on a mobile screen it appears "on top" of the page content, with transparency (and is visible only when the user scrolls). Is there a way to have this mobile-style scrollbar on a desktop screen?

Most of the questions I found about this topic are at least 5 years old and do not do what I want, except somehow this one, but it didn't really solve the problem.

Take a look at this answer https://stackoverflow.com/a/18548909/6745128 might be helpful — Rishabh Dubey, Apr 13 '20 at 20:59
Thanks I will do it that way if can't find something closer to what I'd like — Seldi, Apr 14 '20 at 00:58

score 0 · Answer 1 · answered Apr 13 '20 at 15:41

mobile screens dont have a scroll bar the same way we do on pc.

but you can change the width and style the scroll bar like this:

::-webkit-scrollbar {
 background: #333;
}


::-webkit-scrollbar-track {
 border-radius: 10px;
 -webkit-box-shadow: inset 0 0 6px rgb(0, 0, 0);
}


::-webkit-scrollbar-thumb {
 background: linear-gradient(#a700ff, #00fff7);
 border-radius: 10px;
}

 ::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(#a700ff87, #00fff778);
 }


body {
  height: 200vh;
}

<body></body>

No, this still takes space on screen. What I'm looking for is a way to force the scrollbar to appear the same way as on a mobile. — Seldi, Apr 14 '20 at 00:59

How to make a scrollbar that doesn't change the page width ? (like on mobile screens)

1 Answers1