This article was written in 2014. It might or it might not be outdated. And it could be that the layout breaks. If that’s the case please let me know.

How high is the scroll height of scrolling with the space bar?

I sometimes use the space bar to scroll down a page while reading. Recently I’ve been using it a lot with the random stuff I create, like the Daily Rectangle. Hitting the space bar shows you the next image, minus a bit: it doesn’t scroll 100%, it scrolls a bit less. This makes sense when you’re reading an article. The last lines you were reading at the bottom of the page will still be visible at the top after scrolling. I was wondering how high this height was, and if it’s the same on every browser.

Not the same height.

According to Wikipedia the height is different for all operating systems and for all programs. So I started measuring. First I thought it might be something like a percentage of the height of the viewport. In most browsers it isn’t.

Firefox on my Mac

I found out that on my Mac, the height in Firefox 29 is calc(100vh - 2em). It’s not calc(100vh - 32px)! If you make the default font-size bigger in your prefs calc(100vh - 2em) still works. Makes sense: if your font is bigger, it should scroll less, because the lines of text it needs to show at the top are higher.

Chrome on my Mac

On my Mac the height in Chrome 34 is calc(100vh - 40px). It doesn’t change if you make your font-size bigger. I think I like the way Firefox does it better, since it’s definitely tied to the font-size of the text you’re reading. Opera is the same as Chrome.

Safari

Safari is a bit harder to test since it doesn’t support the vh unit in a calc() function, so I had to write a little script to emulate it. It seems like scrolling with the space bar in Safari is the height of the viewport minus 40px. The same as Chrome and Opera.

IE

I tested it on IE 11 on one of the virtual machines that you can download on modern.ie and there the height seems to be a nice, simple 87.5vh. David Storey tested it on IE9 and IE10. They seem to use the same height as IE11.

The rest?

These are all the browsers I have on my computer. I’m very curious if these same numbers are true for your browsers as well. Maybe they are different on Windows and Linux machines? These numbers are definitely not the same on Windows machines. I need to do more tests, when I find the time. And maybe they are different when you use the page down key? Let me know if you care enough to test it.