refactor: support scroll while dragging in an iframe

Author: chrisvxd

src/view/use-droppable-publisher/get-closest-scrollable.ts

@@ -20,7 +20,8 @@ const isBoth = (overflow: Overflow, fn: (value: string) => boolean) =>
   fn(overflow.overflowX) && fn(overflow.overflowY);
 
 const isElementScrollable = (el: Element): boolean => {
-  const style: CSSStyleDeclaration = window.getComputedStyle(el);
+  const style: CSSStyleDeclaration =
+    el.ownerDocument.defaultView!.getComputedStyle(el);
   const overflow: Overflow = {
     overflowX: style.overflowX,
     overflowY: style.overflowY,
@@ -31,22 +32,23 @@ const isElementScrollable = (el: Element): boolean => {
 
 // Special case for a body element
 // Playground: https://codepen.io/alexreardon/pen/ZmyLgX?editors=1111
-const isBodyScrollable = (): boolean => {
+const isBodyScrollable = (el: HTMLElement): boolean => {
   // Because we always return false for now, we can skip any actual processing in production
   if (process.env.NODE_ENV === 'production') {
     return false;
   }
 
   const body: HTMLBodyElement = getBodyElement();
-  const html: HTMLElement | null = document.documentElement;
+  const html: HTMLElement | null = el.ownerDocument.documentElement;
   invariant(html);
 
   // 1. The `body` has `overflow-[x|y]: auto | scroll`
   if (!isElementScrollable(body)) {
     return false;
   }
 
-  const htmlStyle: CSSStyleDeclaration = window.getComputedStyle(html);
+  const htmlStyle: CSSStyleDeclaration =
+    el.ownerDocument.defaultView!.getComputedStyle(html);
   const htmlOverflow: Overflow = {
     overflowX: htmlStyle.overflowX,
     overflowY: htmlStyle.overflowY,
@@ -76,12 +78,20 @@ const getClosestScrollable = (el?: HTMLElement | null): HTMLElement | null => {
   }
 
   // not allowing us to go higher then body
-  if (el === document.body) {
-    return isBodyScrollable() ? el : null;
+  if (el === el.ownerDocument.body) {
+    if (isBodyScrollable(el)) {
+      return el;
+    }
+
+    if (el.ownerDocument.defaultView?.frameElement) {
+      return el.ownerDocument.defaultView?.frameElement as HTMLElement;
+    }
+
+    return null;
   }
 
   // Should never get here, but just being safe
-  if (el === document.documentElement) {
+  if (el === el.ownerDocument.documentElement) {
     return null;
   }
 

src/view/use-droppable-publisher/get-scroll.ts

@@ -1,6 +1,16 @@
 import type { Position } from 'css-box-model';
 
-export default (el: Element): Position => ({
-  x: el.scrollLeft,
-  y: el.scrollTop,
-});
+export default (el: Element): Position => {
+  const isIframe = el.tagName === 'IFRAME';
+
+  if (isIframe) {
+    const targetEl = (el as HTMLIFrameElement).contentWindow!;
+
+    return { x: targetEl.scrollX, y: targetEl.scrollY };
+  }
+
+  return {
+    x: el.scrollLeft,
+    y: el.scrollTop,
+  };
+};

src/view/use-droppable-publisher/get-scrollable.ts

@@ -0,0 +1,9 @@
+export default (scrollable: HTMLElement) => {
+  const scrollableIsIframe = scrollable.tagName === 'IFRAME';
+
+  const scrollableTarget = scrollableIsIframe
+    ? (scrollable as HTMLIFrameElement).contentWindow!
+    : scrollable;
+
+  return scrollableTarget;
+};

src/view/use-droppable-publisher/use-droppable-publisher.ts

@@ -33,6 +33,7 @@ import useRequiredContext from '../use-required-context';
 import usePreviousRef from '../use-previous-ref';
 import useLayoutEffect from '../use-isomorphic-layout-effect';
 import useUniqueId from '../use-unique-id';
+import getScrollable from './get-scrollable';
 
 interface Props {
   droppableId: DroppableId;
@@ -153,7 +154,7 @@ export default function useDroppablePublisher(args: Props) {
         shouldClipSubject: !previous.ignoreContainerClipping,
       });
 
-      const scrollable: Element | null = env.closestScrollable;
+      const scrollable = env.closestScrollable;
 
       if (scrollable) {
         scrollable.setAttribute(
@@ -162,7 +163,7 @@ export default function useDroppablePublisher(args: Props) {
         );
 
         // bind scroll listener
-        scrollable.addEventListener(
+        getScrollable(scrollable).addEventListener(
           'scroll',
           onClosestScroll,
           getListenerOptions(dragging.scrollOptions),
@@ -204,7 +205,7 @@ export default function useDroppablePublisher(args: Props) {
     // unwatch scroll
     scheduleScrollUpdate.cancel();
     closest.removeAttribute(dataAttr.scrollContainer.contextId);
-    closest.removeEventListener(
+    getScrollable(closest).removeEventListener(
       'scroll',
       onClosestScroll,
       // See: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener