Chrome scrollbar disappears (not overflow-y)

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.

Moving the scrollbar out of the users sight is not as good of an approach of hiding the scrollbar altogether.

Is there any way to fix this without any plugins ?

Is this what you are looking for?

.r-sidebar::-webkit-scrollbar { display: none; } 

This will hide your scroll bar on all chrome browsers. Since its specifc to webkit, it should work across different operating systems assuming browser versions are up to date.

More info here

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

I don't have an immediate answer for this but please provide more details about the machines / os versions / browser versions, and I'll try my best to provide details

Left sidebar:

Add this to the Scroll div:

direction: rtl;
left: -17px;

And this to the divs inside:

.nav{   
 direction: ltr;
}

This will hide the Scrollbar completely. But the div is still scrollable.