Scroll Utilities

animatedScrollTo.js

import raf from 'raf';

/**
  @param t: time (elapsed)
  @param b: initial value
  @param c: amount of change
  @param d: duration
*/
function easeOutCubic(t: number, b: number, c: number, d: number): number {
  return c * ((t = t / d - 1) * t * t + 1) + b;
};

function animatedScrollTo(
  element: Element,
  to: number,
  duration: number = 200
) {
  const start = getScrollTop(element);
  const change = to - start;
  const increment = 10;
  let currentTime = 0;

  function animateScroll() {
    currentTime += increment;
    const val = easeOutCubic(currentTime, start, change, duration);
    normalizedScrollTo(element, val);
    if (currentTime < duration) {
      raf(animateScroll);
    }
  }
  animateScroll();
}

getScrollParent.js

function getScrollParent(element: Element): Element {
  let style = getComputedStyle(element);
  const excludeStaticParent = style.position === 'absolute';
  const overflowRx = /(auto|scroll)/;
  const docEl = ((document.documentElement: any): Element); // suck it, flow...

  if (style.position === 'fixed') return docEl;

  for (let parent = element; (parent = parent.parentElement); ) {
    style = getComputedStyle(parent);
    if (excludeStaticParent && style.position === 'static') {
      continue;
    }
    if (overflowRx.test(style.overflow + style.overflowY + style.overflowX)) {
      return parent;
    }
  }

  return docEl;
}

getScrollTop.js

function getScrollTop(el: Element): number {
  if (isDocumentElement(el)) {
    return window.pageYOffset;
  }
  return el.scrollTop;
}

isDocumentElement.js

function isDocumentElement(el: Element) {
  return [document.documentElement, document.body, window].includes(el);
}

normalizedHeight.js

function normalizedHeight(el: Element): number {
  if (isDocumentElement(el)) {
    return window.innerHeight;
  }

  return el.clientHeight;
}

normalizedScrollTo.js

function normalizedScrollTo(el: Element, top: number): void {
  if (isDocumentElement(el)) {
    window.scrollTo(0, top);
    return;
  }

  el.scrollTop = top;
}