On the Width of Scroll Bars on Mac and Windows

scrollbars.md

How It Works on Mac

By default, scroll bars do not appear on Mac except when the user is scrolling and when there is hidden content. You can double check this by going to System Preferences -> General -> Show scroll bars: Automatically based on mouse or trackpad.

When you do scroll, the width of viewport and the available width of the inner content does not change from what it was. If the width was 300 pixels, it still is 300 pixels.

If you change the "Show scroll bars" setting to "Always" then the scrollbar takes up a decided amount of width - 16 pixels to be precise.¹ Let's say your browser height is 300 pixels and your broswer width is also 300 pixels. With this setting, if you toggle the height of the body from 300 to 600, causing scrollableness, then a scrollbar will appear only have you have done the toggle. The width of your body will have gone from 300 to 284 pixels, because the scrollbar takes up space in a way that it did not in the other setting. Interestingly, if you're talking about a Chrome extension, and you've given the extension a width of 300 pixels, with "Always," the extension width becomes 316 pixels. The extension width is generious. It does not eat.

What if you decide to force a vertical scrollbar to always appear? In the default Mac setting, this will result in no difference visually or in any other way. It's as if you didn't write the CSS at all. In the "Always" setting, it will result in a scrollbar taking up 16 pixels of width. Back to the extension paradigm, it does eat, too.² If the extension width is set to 300 pixels, with this forced vertical scroll bar, the available space is now 284 pixels.

How It Works on Windows

On Windows, the width of the scroll bar is 17 pixels. In my testing, everything about how a Windows behaves is exactly how a Mac behaves scroll-wise when "Always" is enabled in System Preferences.

Footnotes

1. The width of scrollbars for both Mac and Windows were derived by checking the width of the DOM when a scrollbar exists and then checking the width of the DOM when a scrollbar does not exist, and finding the delta between the two. Given that the Chrome inspector rounds numbers to their nearest integer, it very well may be that the actual width is slightly different from these values, but these are the values I got. ↩

2. I should be careful in saying that. overflow-y: scroll to the html does not force a scrollbar in an extension. So the only way to force a scrollbar is to perform this on an inner div element. In doing so, it's unsurprising that a scrollbar would result in eating. It's a separate tier scrollbar from the outer scrollbar. If we could force an outer scrollbar perpetually, it would stand to reason that this not eat. But without an ability to test, it's impossible to know for sure. ↩

I never thought about scrollbar width on different OS. I spent couple of hours trying to figure out why one page looks different on macbook and windows machine (with same browsers). Then I googled this gist. Thanks 🙂

This gist just saved me several hours worth of work. Ran into a UI bug caused by the scrollbar difference between Mac and Windows. Didn't know about the scroll bar behavior options in macOS, was about to download one of those crummy Windows VMs they have for Mac with IE/Edge pre-installed to test it. Glad I didn't have to! Thank you!

very appreciate your note 😄

Third-party apps can set their own scroll bar width. Some have squandered the opportunity, Amazon Music client, e.g., by making the scroll bar even narrower. Azure file comparison has comfortably wide scroll bars which are also transparent.