accounts-frontend/packages/app/components/ui/scroll/scroll.ts

/**
 * Implements scroll to animation with momentum effect
 *
 * @see http://ariya.ofilabs.com/2013/11/javascript-kinetic-scrolling-part-2.html
 */

const TIME_CONSTANT = 100; // higher numbers - slower animation
const SCROLL_ANCHOR_OFFSET = 80; // 50 + 30 (header height + some spacing)
// Первый скролл выполняется сразу после загрузки страницы, так что чтобы снизить
// нагрузку на рендеринг мы откладываем первый скрол на 200ms
let isFirstScroll = true;
let scrollJob: {
  hasAmplitude: boolean;
  start: number;
  y: number;
  amplitude: number;
} | null = null;

export function scrollTo(y: number) {
  if (scrollJob) {
    // we already scrolling, so simply change the coordinates we are scrolling to
    if (scrollJob.hasAmplitude) {
      const delta = y - scrollJob.y;
      scrollJob.amplitude += delta;
    }

    scrollJob.y = y;

    return;
  }

  const start = Date.now();
  let scrollWasTouched = false;
  scrollJob = {
    // NOTE: we may use some sort of debounce to wait till we catch all the
    // scroll requests after app state changes, but the way with hasAmplitude
    // seems to be more reliable
    hasAmplitude: false,
    start,
    y,
    amplitude: 0,
  };

  requestAnimationFrame(() => {
    // wrap in requestAnimationFrame to optimize initial reading of scrollTop
    if (!scrollJob) {
      return;
    }

    const y = normalizeScrollPosition(scrollJob.y);

    scrollJob.hasAmplitude = true;
    scrollJob.y = y;
    scrollJob.amplitude = y - getScrollTop();

    (function animateScroll() {
      if (!scrollJob) {
        return;
      }

      const { start, y, amplitude } = scrollJob;
      const elapsed = Date.now() - start;

      let delta = -amplitude * Math.exp(-elapsed / TIME_CONSTANT);

      if (Math.abs(delta) > 0.5 && !scrollWasTouched) {
        requestAnimationFrame(animateScroll);
      } else {
        // the last animation frame
        delta = 0;
        scrollJob = null;
        document.removeEventListener('mousewheel', markScrollTouched);
        document.removeEventListener('touchstart', markScrollTouched);
      }

      if (scrollWasTouched) {
        // block any animation visualisation in case, when user touched scroll
        return;
      }

      const newScrollTop = y + delta;
      window.scrollTo(0, newScrollTop);
    })();
  });

  document.addEventListener('mousewheel', markScrollTouched);
  document.addEventListener('touchstart', markScrollTouched);
  function markScrollTouched() {
    scrollWasTouched = true;
  }
}

/**
 * Ensures, that `y` is the coordinate, that can be physically scrolled to
 *
 * @param  {number} y
 *
 * @returns {number}
 */
function normalizeScrollPosition(y: number): number {
  const contentHeight =
    (document.documentElement && document.documentElement.scrollHeight) || 0;
  const windowHeight: number = window.innerHeight;
  const maxY = contentHeight - windowHeight;

  return Math.min(y, maxY);
}

/**
 * Scrolls to page's top or #anchor link, if any
 *
 * @param {?HTMLElement} targetEl - the element to scroll to
 */
export function restoreScroll(targetEl: HTMLElement | null = null) {
  const { hash } = window.location;

  setTimeout(
    () => {
      isFirstScroll = false;

      if (targetEl === null) {
        const id = hash.substr(1);

        if (!id) {
          return;
        }

        targetEl = document.getElementById(id);
      }

      const viewPort = document.body;

      if (!viewPort) {
        console.log('Can not find viewPort element'); // eslint-disable-line

        return;
      }

      let y = 0;

      if (targetEl) {
        const { top } = targetEl.getBoundingClientRect();
        y = getScrollTop() + top - SCROLL_ANCHOR_OFFSET;
      }

      scrollTo(y);
    },
    isFirstScroll ? 200 : 0,
  );
}

/**
 * http://stackoverflow.com/a/3464890/5184751
 *
 * @returns {number}
 */
export function getScrollTop(): number {
  const doc = document.documentElement;

  if (doc) {
    return (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0);
  }

  return 0;
}