In macOS, users have the ability to set when they want to see scrollbars in windows. This affects all windows in the operating system, including in web browsers. They have three choices:
- Automatically based on mouse or trackpad
- When scrolling
- Always
Which means you are either in a state where you see them all the time, or a state where you only see them once scrolling has been started through some other means.
The Always option is pretty straightforward. If the window needs scrolling, the scroll bar will be there. If not, it won’t be. If the scrollbar is there, it squishes the page inward to make room for it. Here’s an example where a page goes from needing scrolling to not needing it with the Always setting on:
This is different than the When scrolling option, in which the scrollbar overlaps the content. Here’s an example of that:
These screenshots are the reason I was thinking about this at all. We had a user write in at CodePen because they couldn’t click that notifications icon. Before I added some extra space to prevent that overlapping, some coverage was possible:
Exacerbated by the fact that this user would zoom out, making the target even smaller, to the point it would be totally consumed:
This is only really a consideration with clickable things hugging the right side of the page. If it’s ever a problem for you, adding some padding over there is likely good enough. Or make the clickable area not confined to that narrow of a target. Here in the WordPress admin, some overlap is possible, but the clickable area is big enough that it doesn’t matter:
Good info. It might also be good to note the behavior for the default setting
Automatically based on mouse or trackpadsince this might show up more frequently than the others.When using only the trackpad the scrollbar will behave like the overlap example. However, as long as there’s a mouse that’s not recognized as a trackpad, the scroll bar will behave like the always present setting.
I haven’t used a magic mouse recently, so I’m not sure how that behaves particularly but it might be another thing to consider. Though at this point they’re just edge cases.
Also note that viewport units includes scrollbars (when set to always) – causing horizontal scroll if you have an element with a set width of 100vw.
happy new year everyone :-)
Wow, that is fascinating. We’ve somehow missed that in our UX testing.
I don’t get it… I always override the browser scrollbars with jQuery nicescroll on scrolling elements (it sets overflow to hidden).
https://gist.github.com/Lewiscowles1986/d6339f0b33aa3871b947110c4ee70fb6
Sure users can drink the settings bleach, OS’s can harm, Browser vendors can try to help and end up harming, but it’s your site. At some point you also need to say “this isn’t my problem, I’m trying to change the weather or control the sun.”
Of course with JS and CSS you can and should take control where possible to enhance, but it’s not always our responsibility.
Ugh… sorry to say, but I instantly leave any site that uses that awful scroll-hijacking custom scrolling thingy. It feels so off and unnatural. It’s really replacing a small problem with a disaster.
Exactly as efraim said. Using jQuery nicescrolls gives the worst possible user experience. It doesn’t even come close to responsivnes of the default system scrollbars. Apples trackpad fires scroll events many times faster than a mousewheel and the nicescrolls plugin cant handle that.
Agreed, js scrolling always feels “off” to me.
Custom scrollbars do the complete opposite of “enhance”. For example, surely you’ve realized how sluggish your site feels, right? It’s those custom scrollbars.
Just use SimpleBar guys :)
https://github.com/Grsmto/simplebar
The number of people this catches out, also when you show them how having a trackpad or magic mouse makes them vanish!
One thing worth knowing if you want to use a media query is js, assuming you’re also using modernizr, modernizr.mq (https://modernizr.com/docs#modernizr-mq) will get the correct width (with or without scrollbars) whereas $( window ).width(); will not.
Also, Modernizr has a check for hiddenscroll which you can use to offset things hugging the right side of page.
Yes we should all completely redesign our sites because of a dumb implementation of an optional feature. Because of course Apple can do no wrong, so it is the websites that need to change.
Remember that on mobile devices scrollbars usually appear only when actively scrolling. You just can’t give for granted the classic behavior anymore.
Even on mobile devices you can still tap on something on the very edge though. The macOS scrollbars are a flawed design on Apple’s part.
Sorry to say, but this I redequlis, I have use macOS in over 6 years and I never have trouble with that
I view any very custom modifications to the browser (like this) to be a temporary fad on the internet. For example, IE5 (yes, I am an old timer) allowed coloring of the scrollbars.
I love that Macs pushed the USB port forward (remember parallel ports?) and so many other tech. But they also pushed a 1 button mouse at us at the same time. sigh
This is equivalent to the 1 button mouse. I hate that the scrollbars are so dang hard to use with that setting. And anyone that uses it will run into the same problems that 1 button mice users have. And eventually function over form will win.
If you are the kind of person that has to have form over function, then maybe it’s just fine that some things don’t function properly for you, and maybe eventually your frustration will push you back to the function side of things. (1 button mouse/colored scrollbars)