Body scroll top: 0

Scroll Animation Demos

The scroll animation service provides an easy way to listen for scroll events on the page or an element. It throttles the events to once per frame using requestAnimationFrame. It is a solution built for scrolling effects which need high fidelity, like parallaxing or sticky navigation. It only binds one scroll event to each target.

Support

IE9+

Dependencies

This component expects window.requestAnimationFrame and window.cancelAnimationFrame to exist. A polyfill is included on the page for demo and testing purposes, but it’s likely you already have this in your project.

ES6 Map.

Listen for page scroll

The default target for the scroll listener is the document. If the first parameter is a function, the component will assume the target is the document.

function update(scrollTop) {
  console.log('window scroll top:', scrollTop);
}

var scrollId = OdoScrollAnimation.add(update);

Listen for scrolls on an element

By specifying an element as the first parameter, the scroll animation component will register the scroll event on that element.

Scroller thing top: 0

var scrollElement = document.getElementById('scroller-thing');
var id = OdoScrollAnimation.add(scrollElement, function update(scrollTop) {
  console.log('scroller-thing scrolled');
});

Remove scroll animation

To dispose of the scroll animation listener, use the remove method with the return value from add.

var id = OdoScrollAnimation.add(myCallback);
OdoScrollAnimation.remove(id);