use-scroll.js

function getCoords(e) {
  if (/touch/.test(e.type)) {
    return {
      x: e.changedTouches[0].pageX,
      y: e.changedTouches[0].pageY
    };
  }
  return {
    x: e.clientX,
    y: e.clientY
  };
}

function useScroll(el, params = {}) {
  let pos = {
    // current scroll
    top: 0,
    left: 0,

    // current mouse position
    x: 0,
    y: 0
  };

  let touch, action;

  function testTouch(e) {
    if (e.type == 'touchstart') {
      touch = true;
    } else if (touch) {
      touch = false;
      return false;
    }
    return true;
  }

  const onMove = (e) => {
    if (!action) return;

    // How far the mouse has been moved
    let { x, y } = getCoords(e);
    const dx = x - pos.x;
    const dy = y - pos.y;

    // Scroll the element
    el.scrollTop = pos.top - dy;
    el.scrollLeft = pos.left - dx;

    e.preventDefault();
  };

  const onEnd = (e) => {
    if (!action) return;

    action = false;

    if (e.type === 'touchend') {
      e.preventDefault();
    }

    if (e.type === 'mouseup') {
      document.removeEventListener('mousemove', onMove);
      document.removeEventListener('mouseup', onEnd);
    }

    el.style.cursor = '';
    el.style.removeProperty('user-select');
  };

  const onStart = (e) => {
    if (testTouch(e) && !action) {
      action = true;

      el.style.cursor = 'grabbing';
      el.style.userSelect = 'none';

      let { x, y } = getCoords(e);

      pos = {
        left: el.scrollLeft,
        top: el.scrollTop,
        x,
        y
      };

      if (e.type === 'mousedown') {
        document.addEventListener('mousemove', onMove);
        document.addEventListener('mouseup', onEnd);
      }
    }
  };

  el.addEventListener('mousedown', onStart);
  el.addEventListener('touchstart', onStart);
  el.addEventListener('touchmove', onMove);
  el.addEventListener('touchend', onEnd);
  el.addEventListener('touchcancel', onEnd);

  return {};
}