<story><title>How To Scroll</title><url>http://bost.ocks.org/mike/scroll/</url></story><parent_chain></parent_chain><comment><author>mortenjorck</author><text>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 &amp;#x2F; 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.&lt;p&gt;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).&lt;p&gt;Still, I wouldn’t consider that ideal, and maybe it’s time for some standards action. Here’s my proposal:&lt;p&gt;&lt;pre&gt;&lt;code&gt;  body {
  	scroll-offset: 72px; &amp;#x2F;&amp;#x2F; body will page-scroll 72px less than the window height to compensate for the sticky header
  }&lt;/code&gt;&lt;/pre&gt;</text></comment>
<story><title>How To Scroll</title><url>http://bost.ocks.org/mike/scroll/</url></story><parent_chain></parent_chain><comment><author>mbostock</author><text>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.</text></comment>