Performant scroll change listener

onScrollYChange.js

// Your scroll callback will only be called once per frame and only
// when the y-position changes. Good for doing DOM work without causing
// unnecessary reflows of the document.

function onScrollYChange(callback) {
  let latestKnownScrollY = 0, ticking = false;
  const scrollChanged = () => {
    ticking = false;
    const currentScrollY = latestKnownScrollY;
    callback(currentScrollY)
  }
  const requestTick = () => {
    if (!ticking) requestAnimationFrame(scrollChanged);
    ticking = true;
  }
  const scrollListener = () => {
    latestKnownScrollY = window.scrollY;
    requestTick();
  }
  window.addEventListener('scroll', scrollListener, false);
}

// Usage
onScrollYChange(yPos => {
  console.log(yPos)
});