Chrome scrollbar disappears (not overflow-y)

Question

The page (live-version) consists (roughly) of three parts:

• Left sidebar
• Centered content
• Right sidebar

Right sidebar should be scrollable, so I've set overflow-y: scroll; right: -17px; to simply hide the scrollbar. Body, html have overflow-y: auto;. This way I don't have to have two scrollbars (for page and for right sidebar).

ISSUE: (only in CHROME, tested on version 62 and 63)

For some reason on different machines, chrome gives me two different styles for the scrollbar: Case 1 and Case 2.

So basically, for case 1 the the right sidebar scrollbar is "absolutely positioned" and page hides 17px of itself because of that, whilst for case 2 the scrollbar is "relatively positioned" and the page hides 17px that the scrollbar takes.

QUESTION

1) Why scrollbars are different on the same OS and browser version, but different machines ?

2) Is there any way to fix this without any plugins ? Taking into consideration Windows users have the case 2 and MacOS users either case 1 or 2 ?

Answer 1

1) Why scrollbars are different on the same OS and browser version, but different machines ?

This probably has to do with the system settings on macOS.

If you have Always selected, I'm pretty sure that the scrollbar pushes the page content out of the way. Same with if you have a mouse connected. Otherwise, it has the "absolutely positioned" behavior you mentioned. Keep in mind that Windows users will probably see behavior similar to Always.

2) Is there any way to fix this without any plugins ? Taking into consideration Windows users have the case 2 and MacOS users either case 1 or 2 ?

Well, a bit of opinion first: I don't think it's a good idea to hide the scrollbar without providing another cue to the user communicating the scrollability of the element. Anyway, with that out of the way, I can't think of anything that's not some kind of hack but here goes:

Since this is something that only needs to execute once, and assuming that we want predictable functionality across browsers and OS, you can use some JS here. On systems which persist the sidebar the offsetWidth and scrollWidth properties of the sidebar element will be different. By default, your element could have the follow styles:

$child-h-padding: 15px;
$max-scrollbar-width: 35px;

.r-sidebar {
  overflow-y: scroll;
  padding: 12px $child-h-padding;
  ...rest
}

.r-sidebar--r-padded {
  padding-right: $child-h-padding + $max-scrollbar-width;
  right: -$max-scrollbar-width;
}

You can add/remove the .r-sidebar--r-padded class based on the values of offsetWidth and scrollWidth.

This should work everywhere, regardless of browser/OS. I've already tested on macOS/Chrome with both sidebar settings.