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
}
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: