Scroll Indicator

  • Published:
  • Updated:
  • Popularity: 178 Hearts
  • Editor: Classic
  • View on CodePen

This is a page scroll indicator inspired by the one on LessWrong. Headers are noted and immediately jumpable, and it has two possible appearances that swap out based on breakpoints for a responsive experience best tailored to the user.

On viewports with sufficient horizontal space, the indicator is displayed vertically and has a thumb that represents the height of the user’s viewport. On narrower viewports, the indicator manifests as a horizontal progress bar at the top of the screen.

Ideally, the base of this effect could be achieved using scroll-driven animations with additional JavaScript-based functionality considered progressive enhancement, but that has restrictions if the page has content beyond the main article, such as comments, where one must start implementing overflow: scroll hackery.