react-beautiful-dnd-next/src/state/auto-scroller/fluid-scroller/get-scroll/adjust-for-size-limits.js

Beautiful and accessible drag and drop for lists with React

// @flow
import type { Rect, Position } from 'css-box-model';

type Args = {|
  container: Rect,
  subject: Rect,
  proposedScroll: Position,
|};

export default ({ container, subject, proposedScroll }: Args): ?Position => {
  const isTooBigVertically: boolean = subject.height > container.height;
  const isTooBigHorizontally: boolean = subject.width > container.width;

  // not too big on any axis
  if (!isTooBigHorizontally && !isTooBigVertically) {
    return proposedScroll;
  }

  // too big on both axis
  if (isTooBigHorizontally && isTooBigVertically) {
    return null;
  }

  // Only too big on one axis
  // Exclude the axis that we cannot scroll on
  return {
    x: isTooBigHorizontally ? 0 : proposedScroll.x,
    y: isTooBigVertically ? 0 : proposedScroll.y,
  };
};