Here is how I see it:

And here is how another user sees it:

Why do they have those white scrollbars and how do I align both to look visually the same?

Both users are on the latest macos/chrome.

In my case, the scrollbar only appears when actively scrolling:

<div style="align-items: center; display: flex; height: 100vh; justify-content: center; overflow: auto;">
  <div style="height: 400px; overflow-y: scroll; width: 400px;">
    <div style="background: red; height: 800px; width: 400px;" />
  </div>
</div>

Here is how I see it:

And here is how another user sees it:

Why do they have those white scrollbars and how do I align both to look visually the same?

Both users are on the latest macos/chrome.

In my case, the scrollbar only appears when actively scrolling:

<div style="align-items: center; display: flex; height: 100vh; justify-content: center; overflow: auto;">
  <div style="height: 400px; overflow-y: scroll; width: 400px;">
    <div style="background: red; height: 800px; width: 400px;" />
  </div>
</div>

jsfiddle

• html
• css

• Looks like it changes depending on whether a mouse is connected. Crazy. But how do I get the consistent behavior of not showing these scrollbars all the time? – Frank Fiegel Commented Feb 14 at 4:15
• Initial scrollbar is also visible on Firefox 135.0 (64-bit) on Windows 11 (but disappears after 2 - 3 seconds) – DarkBee Commented Feb 14 at 7:54

2 Answers 2

Try to style the scrollbar Custom Scrollbars In CSS

This is a MacOS system preference, Appearance->Show scroll bars. Automatic shows it if a mouse is connected or hides it if a trackpad is connected, "When scrolling" hides it unless you're scrolling, and "Always" will, well, always show it. You can't control whether it always shows on your website, but you can style it as mentioned in another answer. If you want to see the website like the other user, you'll want to set "Show scroll bars" to Always in your Appearance preferences.