Use requestAnimationFrame to handle scrolling smoothly

createScrollManager.js

const createScrollManager = function() {
  let callbacks = [];
  let scrollPosition = -1;
  let animatedKilled = false;
  
  const animate = () => {
    requestAnimationFrame(onScroll);
  }

  function onScroll(){
    if(animatedKilled) return;
 
    if (scrollPosition !== window.pageYOffset) {
      window.removeEventListener('scroll', animate);
      scrollPosition = window.pageYOffset;
      callbacks.forEach(cb => cb(scrollPosition));
      animate();
    } else {
      window.addEventListener('scroll', animate);
    }
  }
  
  animate();
  
  return {
    add: function(cb) {
      callbacks = [...callbacks, cb];
    },
    remove: function(cb) {
      callbacks = callbacks.filter(value => value != cb);
    },
    destroy: function() {
      animatedKilled = true;
      window.removeEventListener('scroll', animate);
    }
  }
}

export default createScrollManager;

Inspired from this gist: https://gist.github.com/Warry/4254579

Would be nice if this could work with resize too, like scrollManager.add("resize", log1) and scrollManager.add("scroll", log1)