
How To Scroll - mbostock
http://bost.ocks.org/mike/scroll/
======
mortenjorck
Number five is the rule that’s being broken by an increasing percentage of the
web without any custom scrolling at all: Every site with a sticky top bar
breaks spacebar / pgdn scrolling by covering up the top few lines of text
after a full-page scroll, requiring the user to back up a few lines to see
what was hidden.

There should be a fairly straightforward Javascript workaround for this,
intercepting the spacebar or pgdn keys to scroll the height of the
unobstructed viewport instead of the full viewport, but I haven’t seen anyone
implement it (I’ve been considering creating my own open-source library for it
but I have no experience managing an OSS project).

Still, I wouldn’t consider that ideal, and maybe it’s time for some standards
action. Here’s my proposal:

    
    
      body {
      	scroll-offset: 72px; // body will page-scroll 72px less than the window height to compensate for the sticky header
      }

~~~
cousin_it
I have a more radical proposal, just hide all elements with position:fixed.
I've never seen such elements contain anything useful anyway.

~~~
windsurfer
This isn't even a problem though. Try pressing pgdn on any page with a fixed
header. Modern browsers only scroll by 80% or so.

EDIT: why the downvotes? Try it yourself on
[http://legitmix.com](http://legitmix.com)

~~~
codezero
I've found the best way to avoid downvotes on HN is to pose your assertion as
a question (as sincerely as possible) :)

"This isn't even a problem though." -> "Is this really a problem? I thought
that... correct me if I'm wrong!"

Your karma will move in the positive direction almost every time.

~~~
wrikl
Yeah, it's generally a good tip for interaction in general, where constantly
making assertions comes across as argumentative and annoys people who realise
that not everything they say is a fact.

------
mbostock
This essay is my attempt to synthesize a few general rules from recent work
with custom scrolling. Scroll-based effects can be contentious, but I believe
a lot of that comes violating reader’s expectations and breaking direct
manipulation. There are ways to use scrolling effectively — to achieve the
desired visual design without hurting usability.

~~~
Vendan
Have you thought about some kind of toggle for those of us for whom this
scrolling junk irks? I've yet to see any site that actually uses it to present
content that wouldn't have been fine without it.

~~~
mbostock
Toggles aren’t a great solution; it’s a pain for you since you need to opt-in,
and it’s a pain for the designer since they now have to create two different
versions of the site.

I think either we figure out how to use scrolling effectively or we
collectively realize it’s a mistake and abandon it as a fad. My personal
belief is that we can make it work, and improve the visual presentation
without harming usability, but perhaps there are a few more things to figure
out.

~~~
Vendan
Unfortunately, I don't care how much of a pain something is for the designer.
Remember, the designer wants me on the page, not the other way around. And I'd
rather be able to have a sane website experience rather then a crappy one.
Most of the examples you had were absolutely horrible to deal with, even
though I'm not on a weird platform. Win7 with latest Chrome, and the mac one
won't let me get past the second tick thingy. IMHO, I wish this fascination
with "Oh, let's screw with the user experience cause we want to be _special_ "
would just disappear.

~~~
SiVal
I strongly disagree. I like the variety and the experiments. When you try new
things, some will work out, some won't, and which do and don't vary depending
on who you ask.

I'm still sympathetic. There are certainly UI experiences I can't stand. Pages
that throw things in my face on hover are my biggest pet peeve. You jump to a
page, your mouse happens to land on top of some random thing. You don't click,
but it doesn't matter, because it throws a blanket over what you're trying to
see because you hovered over something you _didn 't_ want to see, and now you
have to figure out how to somehow get rid of it.

It's a revolting experience that I see everywhere, but I seem to be the only
one who notices that trying to move my mouse to something I DO want to click
ends up stepping on a hover-mine, which covers what I was trying to click...,
so it's not like I can get anyone else to complain. I feel your pain (even
though I LIKE some of these scroll effects.)

But if we were to tell designers to "stop screwing with the user experience",
we'd just as likely have every page throwing random things in your face as
part of the "standard hover UI" as get rid of it.

We're better off in the end with lots of experiments, seeing what new ideas
seem to work, and adding support for those into the evolving Web platform.

------
205guy
Good god, how about "don't break anything!" Is that too much to ask for?

As in "don't break scrolling, don't break forward and back navigation, don't
break link highlighting, don't break resizing (desktop and mobile), don't
break clicking (I kid you not, some websites entice you to click and then
can't be bothered to respond), don't break plain text."

I agree with everything in this article, but it should be common sense for a
designer/developer/writer. Stop breaking the Internet. Serve up data, not
apps, give me some viewing hints if you must, but let me or my browser
settings control my viewing experience.

I suppose plain data doesn't make money, which is why all the apps/JS and
interaction got added to the page to hijack our attention which could be then
monetized.

~~~
vanderZwan
Also, if I select a piece of text to copy, don't unselect and show a damn
popup with "share on facebook/twitter" when I right click!

------
smoe
In my opinion if you have a site that mainly consits of text (e.g. News sites,
blogs) you should never interfere with scrolling behaviour. Lazy loading
content is ok, but please keep dynamic stuff to a minimum.

Because I'm traveling I'm using a cheap 70$ Android. So the phone isnt very
fast and the internet connections slow. This makes a good number of "modern",
especally SPA news sites completely unusable. Scrolling callbacks constantly
freezing the whole interface. It's not per se the fault of using too much
javascript – gmail and facebook work pretty well. But if you dont have
ressources to optimize your sites fancy js magic please consider not doing it
at all.

I dont expect much of my cheap phone. But reading plain text is definitely
something i do.

~~~
jplur
I just gave up trying to read a newsweek mobile form article because of this
(site kept resetting the scrollpoint to the top of page). If I can't read a
text article on my $500 pocket super computer, I'm beyond annoyed.

And I agree, even if your scroll .js works perfectly, the callbacks leave a
perceptible pause on most phones.

------
Vendan
To be honest, hijacking scrolling takes me to about the 90% "I'm ready to
leave this site" frustration level. I've learned to live with it for a few
sites, but if you don't get my attention is about 10 seconds, I'm gone.

------
tripa
Shift-space scrolls up a page. Thank you!

I come from Unix, I'd have expected b or backspace to scroll up a page, been
disappointed by browsers numerous times, and just lived without it.

~~~
vacri
I use Firefox, where / is 'search in page' just like unix tools. I flop around
like a dying fish when I have to use Chrome, where you have to use the _gasp_
chorded keys ctrl+f.

A lifelong unixy sysadmin friend of mine particularly hates browsers and
ctrl-w. To him, 'ctrl-w' means 'clear text field', particularly useful for
things like password prompts where you can't see what's been written. So he
goes to clear a password field in a browser window... and the webpage
disappears

~~~
Mouq
Pentadactyl is your friend, friend

[http://5digits.org/pentadactyl/](http://5digits.org/pentadactyl/)

~~~
vacri
I never really looked at it - I guess it's time to finally try it. Thanks.

------
maxmcd
#3 is the biggest offender for me.

The feeling of "well, I'm scrolling, but nothing's happening. Am I doing
something wrong...oh there it is" can really throw off an otherwise positive
content experience.

~~~
MisterBastahrd
Yeah... sometimes I'm scrolling and there's some sort of effect on the page
that some design nerd spent a couple work-weeks on, but it may not always be
readily apparent. If I do what I'm apt to do when scrolling doesn't work, aka
click on the scrollbar to jump ahead, then it breaks the entire presentation.
Having to scroll forever to get at the content I'm looking for is incredibly
annoying.

------
jameshart
Using scroll-driven websites on a Mac with its gesture-based trackpad
scrolling is often a beautiful experience, and it's usually also delightful on
an iPad. Sometimes it even translates well to mice with scrollwheels. Using
the same site on a windows laptop with weak trackpad gestures, where you
instead rely on arrow keys, or awkward middle-button-synthesis for scroll,
it's all too often completely frustrating. Even this piece seems to regard
users using anything other than an apple trackpad or a scrollwheel mouse as a
secondary concern.

------
InclinedPlane
Position:fixed isn't a panacea either, I've seen it horribly overused as well.
Lately I've seen a lot of UIs recreating the worst mistakes of the era in the
late '90s when everyone discovered frames. I've seen some cases where sites
are so broken that they have maybe one line of text of scrollable content on
mobile devices because of all the dumb mostly useless fixed content on every
page (ads on the bottom, headers on the top).

~~~
boomlinde
Yes, but you have to have the "share on X" buttons follow you through the
whole document. You never know when the moment is lost!!!

------
badusername
This is great, and perfectly encapsulates all the irksome interactions and
usability problems with scroll hijacking that has taken over the web in the
last couple of years. I hope this article travels wide and forces a rethink of
some of the strategies.

------
MichaelGlass
He proposes event based and scroll based interfaces. The Mac Pro example is
hideous, but Apple's retina iMac page is quite beautiful (and lives somewhere
between the two, not using gestures but giving the user the impression that no
scrolling is happening) [http://www.apple.com/imac-with-
retina/](http://www.apple.com/imac-with-retina/)

------
TheLoneWolfling
I'll add:

Don't break accessibility. Hijacking scrolling can easily confuse
screenreaders, spiders, old browsers, etc. Especially when you start doing
tricks with hiding content in weird ways, etc, etc.

------
ajcarpy2005
Larger jumps in page-scroll-position could possibly be less distracting on our
vision systems. I just don't want to be unsure about what will happen when I
trigger the scrolling behavior.

------
thisjepisje
It makes me sad that very little applications support scrolling by clicking
the mmb/scrollwheel then dragging the mouse, this is my preferred method of
scrolling.

~~~
pestaa
I liked that too, but for some reason my KDE + Firefox didn't support it out
of the box.

------
mariusmg
Real men scroll only with space bar (and shift + space) :)

