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.
The Most Popular Tools
- Random Word Generator: Generate a list of random words. Great tool for brainstorming ideas.
- Remove Line Breaks: Remove unwanted line breaks from your text.
- Random Choice Generator: Let this tool make a random decision for you.
- Convert Word to HTML: Automatically convert word contents to HTML code.
- Text to HTML: Quickly change plain text into HTML paragraphs.
- Alphabetical Order: Alphabetize lists, or other text content with this tool.
- Capitalize the First letter of Sentences
- HTML Table Generator: Generate the code for a simple HTML table.
- Word Counter: Count the number of words in your text.
- Remove Duplicate Lines: Remove duplicate lines from a text file.
- HTML Compression: Compress HTML contents into a smaller size.
The Newest Tools
- Random Password Generator
- Word Counter
- List of Common Words
- Remove Extra Whitespaces
- Uppercase or Lowercase Text
- Remove Duplicate Lines
- Brainstorm a Website Name
- Random Nouns Generator
- Random Verbs Generator
- Random Adjective Generator
- Convert Decimal to Binary
- Country Dropdowns Code
- HTML Text Generator
- Convert URLs to HTML Links
- Convert CSV Text to HTML Table
- HTML Character Encoding Tool
- Encode URL