Steady.js – A Jank-Free Module For Handling On-Scroll Events

Steady.js – A Jank-Free Module For Handling On-Scroll Events


SHARE & COMMENT

Happy Monday! Today, we are introducing Steady.js, a jank-free module to do logic on the on-scroll event without performance regressions in @media-query like conditions.

How does it work?

Steady’s main goal is to make the user scrolling jank-free. Below is an explaination on how Steady is working under the hood:

  • First, Steady attaches a handler to the on-scroll event, that excutes the trackers (collecting numbers only).
  • Then it calls another function that checks the conditions with values inside a requestAnimationFrame to avoid making the on-scroll handler fat and slow, which will jank our scrolling.
  • After that check, the function tries to see if the conditions are met. If they’re met, it calls the handler with the values and the done function, otherwise it does nothing.
  • When the handler is called, Steady stops collecting values until the done callback is called by the handler. This will help you when you do async stuff.

 

 

Features

  • Tiny on-scroll handler that collect values only, offloading the computations to requestAnimationFrame.
  • Throttling on-scroll handler to avoid calling it more than what we need.
  • Simple and reusable trackers that works like @media-query.
  • Built-in trackers:
    • bottom: you can use it to check did the user reach the bottom of the page/element yet? ( e.g. before reaching the end of the page by 200px start loading new content ). And it works of the scrollable elements and window!
    • top: how much did he scroll the window/element down?
    • width: viewport width, since your logic might change based on the viewport size
    • scrollLeft: this is for scrollable elements only, that collects how much did you scroll from the left of the element.
  • Extendable trackers, you can simply roll your own trackers.
  • Stopping and resuming the onScroll handler

Demo – Infinite scroll

Demo – Scrollable element

View on GitHub

SHARE & COMMENT