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 ?
3 Answers
Answers 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.
Answers 2
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.
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 additional answer
Answers 3
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.
0 comments:
Post a Comment