@hello-pangea/dnd/src/state/auto-scroller/fluid-scroller/get-scroll/adjust-for-size-limits.ts

Beautiful and accessible drag and drop for lists with React

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

interface Args {
  container: Rect;
  subject: Rect;
  proposedScroll: Position;
}

export default ({
  container,
  subject,
  proposedScroll,
}: Args): Position | null => {
  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,
  };
};