A jank-free module to do logic on the onscroll
event without performance regressions in @media-query like conditions.
Steady's main goal is to make the user scrolling jank-free. Below is an explaination on how Steady is working under the hood:
onscroll
event, that excutes the trackers (collecting numbers only).requestAnimationFrame
to avoid making the onscroll
handler fat and slow, which will jank our scrolling.done
callback is called by the handler. This will help you when you do async stuff.onscroll
handler that collect values only, offloading the computations to requestAnimationFrame
.
onscroll
handler to avoid calling it more than what we need.@media-query
.
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 sizescrollLeft
: this is for scrollable elements only, that collects how much did you scroll from the left of the element.s.addCondition(condition)
: it gives the ability to add a condition on the fly. And condition
is a string that works as the identifier of the condition (e.g top
)s.removeCondition(condition)
: same as the above but it removes the condition.s.addTracker(conditionName, fn)
: a method to create custom trackers. look at the example belows.stop
: it removes the onScroll listener, this method is good for Single-Page applications whin switching between routes/views.s.resume
: reattaches the handler to the onScroll event. Exampleconditions
(Object): this is a key/value object that defines rules for the trackers. All trackers have min
and max
suffix out of the box. It's like @media-query
but for onscroll
eventhandler
(Function): a handler that gets called when the conditions are met, with two parameters:
values
(Object): contains a key/value object, where the key is the name of the tracker and the value is it's value.
done
(Function): a function that you call when you're done processing, this way you can make sure that your handler can't be called again while you process an async thingy ( e.g. waiting for an AJAX request to finish ).[scrollElement]
(HTML Element): it gives you the ability to run Steady on a scrollable element instead of window. This property is optional that defaults to window
. Demo[throttle]
(Number): the timeout delay in milliseconds, it's used to avoid calling the Steady onscroll handler more than we need to. This property is optional that defaults to 100 ms$ npm install steady
$ bower install Steady.js
You can download the latest release from the github repo
scrollY
, scrollX
, and scrollTop
top