Scroll Indicator

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

This is a page scroll indicator inspired by the one on [LessWrong](https://lesswrong.com). 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.