16

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 ?

Dennis Novac
  • 1,003
  • 10
  • 23
  • Some questions: which OS did you use for testing? Are you sure browser cache has been fully emptied? For my case (Windows and Chrome version 63.0.x) everything works (so no case 2). – Andreas Dec 31 '17 at 20:34
  • looking at the live version and running through responsive widths i see a lot of responsive issues. my macbook air has 1440px wide and i was seeing only part of the right side panel on load. i'd start with looking at your css rules. – xeo Jan 07 '18 at 17:20

3 Answers3

8

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.

macOS scroll bar OS settings

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.

godfrzero
  • 2,230
  • 1
  • 26
  • 31
  • "Keep in mind that Windows users will probably see behavior similar to Always" A couple of notable exceptions are IE11 and Edge, which auto-hide the scrollbar after a few seconds. Newer versions of Microsoft Office do it too and it's very irritating (there's no way to disable it). – BoffinBrain Jan 03 '18 at 12:20
4

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

random-forest-cat
  • 33,652
  • 11
  • 120
  • 99
1

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.