Scrolling: it’s really OK to have some white space at the bottom of the window

http://www.tbray.org/ongoing/When/201x/2011/11/26/Misscrolling

by robinhouston • 15 years ago

108 56 15 years ago

hammock• 15 years ago

From the comments:

This problem has been around forever, but there is a new problem that makes scrolling even worse than before. Sites which have headers or footers that have a fixed position with respect to the browser viewport completely break scrolling because when you scroll, neither the red nor the green line are visible. The green line is under the navigation junk at the top of the page.

steve-howard• 15 years ago

I find that in general, any fixed-position elements in a page are distracting. The Web news article has long been styled after actual news articles. So when the page stops acting anything like a real paper page (more than just animated ads, I'm talking about big pictures and nav bars that follow you all over the page), I have a lot of trouble reading. The NY Post is particularly bad.

estel• 15 years ago

Adapting to the advantages of a dynamic medium is definitely not something I'll ever see as a negative for a website in itself.

naner• 15 years ago

Maybe I'm just getting old but I find any fixed elements on a scrolling page distracting. My brain expects the whole page to move when scrolling yet my eyes are drawn to this bit that is stuck in place.

Also these fixed elements tend to be horizontal bars across the top or bottom of the page, reducing my reading area. That also sucks, especially since all laptop manufacturers decided we all should have super-widescreen displays.

EDIT: Apologies, I didn't see steve-howard's post which essentially says the same thing.

zbowling2• 15 years ago

I bet you hated framesets on the web when they were around.

bdr• 15 years ago

Agreed. Fixed elements create relative motion.

jarek• 15 years ago

Incidentally, I notice that almost none of the sites worth reading have such features.

icebraining• 15 years ago

Now that frameworks like Bootstrap have it too, that might not hold true for long, unfortunately.

webspiderus• 15 years ago

I've had a similar gripe with scrolling, although I encountered with text editors instead of browsers. Having used Sublime Text for a while (which does what the article suggests and shows you as much white space as is needed to keep the display consistent), it is really jarring using many of the other editors which refuse to do this, especially as I often tend to write new code at the bottom of the page.

Being forced to consistently look at the bottom of my screen instead of the top or the middle is pretty annoying, maybe a change in browsers could trigger a change in text editors as well!

tikhonj2• 15 years ago

Emacs does this, and so does Vim (I think). The main difference, I suspect, is that people who use Emacs and the like don't use their scroll-bars nearly as often as using a keyboard to get around; people using some of the other text editors, on the other hand, probably navigate with the mouse more. I think the behavior proposed here is oriented towards the former more than the latter, which would also explain the different behavior in text editors.

jdpage• 15 years ago

IIRC, Visual Studio does it too in some cases. You can't scroll past the end of the code, but if you jump to a point in the code, it will always put it at the top of the screen, and provide an overscroll area if necessary.

losvedir2• 15 years ago

> Having used Sublime Text for a while (which does what the article suggests and shows you as much white space as is needed to keep the display consistent)

Really? Was there some sort of option you turned on?

I'm a happy ST2 user (bought my license a couple weeks ago), but that's been one issue I've had lately. I can't seem to scroll past the bottom of the page. For now I've just been typing with my cursor at the bottom of the screen, but I'd love to move it to the middle. (as in vim's zz).

jaylevitt• 15 years ago

Add "scroll_past_end": true to both your File settings and your User settings.

tikhonj2• 15 years ago

I definitely agree with this: I am annoyed by this behavior fairly consistently. I've used some programs which do this correctly--most notably Emacs--and find it to be a much more natural way of scrolling.

However, I was under the impression that I am one of the few people that uses the space bar to scroll, so browsers would not give changes like this a high priority.

How many other people scroll this way? Do you also find the current behavior annoying, or would you find his preferred change less convenient?

scott_s2• 15 years ago

I never have this problem because I scroll continuously with the touchpad. Before I had access to a touchpad, I scrolled continuously with the mouse wheel.

ars• 15 years ago

I think it may be a mac thing, since I've never seen a mac with a scroll wheel (although I'm sure they exist).

bradleyland• 15 years ago

Couldn't you dynamically add padding to a footer element based on the view port size, resulting in sufficient "whitespace" under your content for the browser to render as you continue to scroll?

eli• 15 years ago

Sure, but then it makes the scroll bar position inaccurate. The whitespace needs to go beyond the end of the scroll bar.

reacocard• 15 years ago

Does it? If you can scroll further with the keyboard than the scrollbar can indicate, that would also make the scrollbar inaccurate. Perhaps instead we could add an indicator to the scrollbar (ala Chrome's text search indicators) that shows where the content actually ends.

jgh• 15 years ago

TIL I can scroll with a space bar.

Sharlin• 15 years ago

This is also a problem with intra-page links to named anchors - usually browsers scroll the page so that the anchor is at the top of the window, but this does not happen if the anchor is near the bottom of the page. Very confusing.

prawn2• 15 years ago

That point was made in the article.

rwolf• 15 years ago

Mentioned in the article.

soljin2000• 15 years ago

This seems like a piddling thing that belongs no where in the realm of the browser. This seems to be just about hitting page down. Which 99% of users don't do. They swipe, mouse wheel, my mom even clicks and drags the scroll bar. And for the 1% of you that this drives insane make a plugin that adds something like this to all your pages. As for anchor links you could easily add extra padding dynamically.

body{ padding-bottom:1200px; } /* rolls eyes */

alexchamberlain• 15 years ago

This actually works really well... I'm thinking there must be a way for Javascript to add some dynamic padding onto the body element based on viewport size and the position of the footer element.

JonahBraun• 15 years ago

Safari in iOS handles this nicely. You can scroll below the bottom of the page and the default grey background _behind_ the page becomes visible. Desktop browsers could also do this.

othermaciej• 15 years ago

Safari on Mac OS X does this as well (though only when touch-scrolling, not when keyboard scrolling).

prawn2• 15 years ago

Then it snaps back though, right? Rendering it a bit useless.

Too• 15 years ago

No, it's not useless because it gives a visual indicator that hey, something different happened. And besides, both the scroll and especially the return is animated which will let your eye follow the line where you should keep reading.

jonknee• 15 years ago

This is the behavior in Lion as well for Chrome and Safari, not FireFox though.

crazygringo2• 15 years ago

I agree it would be great in theory... but in practice there's a HUGE problem that the author doesn't seem to have considered: many webpages have footers.

I'm talking about normally-positioned footers, not fixed-position ones.

You're not supposed to scroll beyond a footer. It would look terrible. And you don't want to put extra space between the content and the footer either, or have that space vary. (How would you even know)

So while this works great in word-processors, code editors, etc., unfortunately there's just no way to do it in browsers. Literally no way to implement it, even if the browser-makers wanted to.

An aside: it would be great if browsers somehow calculated fixed-position headers/footers and took them into account when calculating scroll distance for space-bar-scrolling...

derefr2• 15 years ago

> You're not supposed to scroll beyond a footer. It would look terrible.

Like this? http://i.imgur.com/kFZSo.png

dhbanes• 15 years ago

I think he means like this: http://i.imgur.com/lWzkl.png

nilbus• 15 years ago

Chrome 15 solved / worked around this problem by smooth scrolling whenever you page up/down. Without the instant jump, the eye can easy tell where the page is compared to where it was before.

tseabrooks• 15 years ago

I always find it amazing how often we (Techies) think that problems we have are real problems. Is there some data, analytics from a well traveled site, that can tell us what percentage of users tend to use spacebar to scroll a web page... or use page up / down? My gut tells me it won't be a big number. If I'm right than this is only a problem for power users, who make up a small percentage of potential users / customers. Could effort be better spent, then, on something else that effects more customers?

ChrisLTD• 15 years ago

I suspect you're right about the number of users troubled by this behavior. However, that doesn't mean it shouldn't be fixed. If browsers are going to have this feature it might as well work properly.

cjfont• 15 years ago

I'm guessing it might also effect users with disabilities who rely more heavily on the keyboard for nav.

RobAtticus• 15 years ago

I agree. I've found that since I discovered the two-finger scrolling on my MBP (and to a lesser extend, the scroll wheel) that I'm usually continuously scrolling while my eyes remain relatively fixed rather than using spacebar or page down.

Rusky• 15 years ago

It's not just people who use space to scroll. I use a mouse wheel, but I'm still affected by the second problem of URL fragments at the bottom of the page.

Timothee• 15 years ago

Space-bar-scrolling is one thing but "links with anchors at the bottom of the page" is a problem (that I've encountered often enough) regardless.

(edit: I'm actually having that problem just right now in the Xcode documentation… which is pretty much a browser)

tung• 15 years ago

One of the things I like about Readability is that space bar scrolling puts a blip on the side where my eyes can see where I should continue reading. I've never used the space bar to scroll elsewhere because the behaviour's too inconsistent.

blahedo• 15 years ago

In the early years of the web I actually threw in a raft of <br> tags at the bottom of my webpages just to counteract this problem---I've been complaining about it for upwards of fifteen years. My current solution is to put a "padding-bottom: 5in" in my #footer element, which is marginally cleaner, but of course it's specific to websites that I control....

joshfraser• 15 years ago

The big assumption here is that most people use the space bar to jump one page at a time while reading. For me, I typically scroll through the page a little at a time and follow along while I read. I'd be curious to know which approach is most common. I guess it wouldn't actually be that hard to collect.

Scrolling: it’s really OK to have some white space at the bottom of the window

Related Stories