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.

BROWSERVERSIONSCROLLBAR WIDTH
Chrome 34 17 pixels
Internet Explorer 11 17 pixels
Internet Explorer 10 17 pixels
Firefox 29 17 pixels
Firefox 28 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.

Other Tools on this Website