Width of a Browser Scrollbar
I always had in my head a ballpark estimate that the width of a browser scrollbar was about 20 pixels but I was bored today so I decided to figure out exactly how wide the scrollbars are on different browsers.
The short answer is that on modern browsers generally the scrollbars are 17 pixels wide but I would still recommend that you continue to use 20 pixels as your spec when working on wireframes or creating mock-ups as it leaves you some room for error - especially if your layout is not flexible.
Testing Tool to Check Scrollbar Width
I tried a variety of approaches to check the scrollbar size. In the end, I opted for an approach where I get the width of a 100% div and I get the width of another 100% div that has a scrollbar present. Therefore the scrollbar width is the difference between these two numbers.
You can try it for yourself by checking out his page: Scrollbar Pixel Width Test
Pleases note, that currently it only works on browsers on PCs. If I get bored again one day, then I'll figure out how to revise it to work on browsers on the mac OS - but don't hold your breath waiting for this to happen.
Browser Scrollbar Test Results
Here are the exact specifications for a bunch of current browsers that I had easy access to.
|Internet Explorer||11||17 pixels|
|Internet Explorer||10||17 pixels|
Browser Scrollbar Conclusion
So surprisingly, at least to me, the scrollbars seem to be a standard width across the three main browsers (Chrome, Firefox, Internet Explorer) that I tested. And that twenty pixels is really still a fair guesstimate to work from.
Thus concludes our exciting experiment with measuring the scrollbars on modern browsers. Hopefully somebody finds this information useful.