@helpscout/hsds-react/components/ScrollLock/ScrollLock.utils.js

React component library for Help Scout's Design System

"use strict";

exports.__esModule = true;
exports.scrollLockX = scrollLockX;
exports.scrollLockY = scrollLockY;
exports.handleWheelEvent = handleWheelEvent;

function scrollLockX(event, stopPropagation) {
  var deltaX = event.deltaX;
  var scrollNode = event.currentTarget;
  var clientWidth = scrollNode.clientWidth,
      scrollWidth = scrollNode.scrollWidth,
      scrollLeft = scrollNode.scrollLeft;

  if (stopPropagation) {
    event.stopPropagation();
  }

  if (deltaX > 0 && deltaX > scrollWidth - clientWidth - scrollLeft) {
    scrollNode.scrollLeft = scrollWidth;
    event.preventDefault();
  } else if (deltaX <= 0 && -deltaX > scrollLeft) {
    scrollNode.scrollLeft = 0;
    event.preventDefault();
  }
}

function scrollLockY(event, stopPropagation) {
  var scrollNode = event.currentTarget;
  var clientHeight = scrollNode.clientHeight,
      scrollHeight = scrollNode.scrollHeight,
      scrollTop = scrollNode.scrollTop;
  var deltaY = event.deltaY;

  if (stopPropagation) {
    event.stopPropagation();
  }

  if (deltaY > 0 && deltaY > scrollHeight - clientHeight - scrollTop) {
    scrollNode.scrollTop = scrollHeight;
    event.preventDefault();
  } else if (deltaY <= 0 && -deltaY > scrollTop) {
    scrollNode.scrollTop = 0;
    event.preventDefault();
  }
}

function handleWheelEvent(event, direction, stopPropagation) {
  if (direction === 'x') {
    return scrollLockX(event, stopPropagation);
  } else {
    return scrollLockY(event, stopPropagation);
  }
}