svelte-dnd-action 0.9.40 → 0.9.41

package/README.md

@@ -22,7 +22,7 @@ It is being actively maintained.
 -   Rich animations (can be opted out of)
 -   Touch support
 -   Define what can be dropped where (dnd-zones optionally have a "type")
--   Scroll dnd-zones and/or the window horizontally or vertically by placing the dragged element next to the edge
+-   Scroll dnd-zones (of the relevant "type"), parent containers that contains them and/or the window horizontally or vertically by placing the dragged element next to the edge
 -   Supports advanced use-cases such as various flavours of copy-on-drag and custom drag handles (see examples below)
 -   Performant and small footprint (no external dependencies, no fluff code)
 -   Fully accessible (beta) - keyboard support, aria attributes and assistive instructions for screen readers
@@ -82,7 +82,7 @@ npm install --save-dev svelte-dnd-action
         width: 50%;
         padding: 0.3em;
         border: 1px solid black;
-        /* this will allow the dragged element to scroll the list */
+        /* this will allow the dragged element to scroll the list although starting in version 0.9.41 the lib would detect any scrollable parent*/
         overflow: scroll;
         height: 200px;
     }
@@ -207,7 +207,6 @@ If you want to implement your own custom screen-reader alerts, roles and instruc
 -   Any data that should "survive" when the items are dragged around and dropped should be included in the `items` array that is passed in.
 -   The host component must refresh the items that are passed in to the custom-action when receiving consider and finalize events (do not omit any handler).
 -   FYI, the library assumes it is okay to add a temporary item to the items list in any of the dnd-zones while an element is dragged around.
--   If you want dragged items to be able to scroll the container, make sure the scroll-container (the element with overflow:scroll) is the dnd-zone (the element decorated with this custom action)
 -   Svelte's built-in transitions might not play nice with this library. Luckily, it is an easy issue to work around. There are examples above.
 
 ### Overriding the item id key name

package/dist/index.js

@@ -501,33 +501,13 @@
 
   /**
    * @param {HTMLElement} el - the element to check
-   * @returns {boolean} - true if the element in its entirety is off screen including the scrollable area (the normal dom events look at the mouse rather than the element)
+   * @returns {boolean} - true if the element in its entirety is off-screen including the scrollable area (the normal dom events look at the mouse rather than the element)
    */
   function isElementOffDocument(el) {
     var rect = getAbsoluteRect(el);
     return rect.right < 0 || rect.left > document.documentElement.scrollWidth || rect.bottom < 0 || rect.top > document.documentElement.scrollHeight;
   }
 
-  /**
-   * If the point is inside the element returns its distances from the sides, otherwise returns null
-   * @param {Point} point
-   * @param {HTMLElement} el
-   * @return {null|{top: number, left: number, bottom: number, right: number}}
-   */
-  function calcInnerDistancesBetweenPointAndSidesOfElement(point, el) {
-    var rect = getAbsoluteRect(el);
-    if (!isPointInsideRect(point, rect)) {
-      return null;
-    }
-    return {
-      top: point.y - rect.top,
-      bottom: rect.bottom - point.y,
-      left: point.x - rect.left,
-      // TODO - figure out what is so special about right (why the rect is too big)
-      right: Math.min(rect.right, document.documentElement.clientWidth) - point.x
-    };
-  }
-
   var dzToShadowIndexToRect;
 
   /**
@@ -541,17 +521,6 @@
   }
   resetIndexesCache();
 
-  /**
-   * Resets the cache that allows for smarter "would be index" resolution for a specific dropzone, should be called after the zone was scrolled
-   * @param {HTMLElement} dz
-   */
-  function resetIndexesCacheForDz(dz) {
-    printDebug(function () {
-      return "resetting indexes cache for dz";
-    });
-    dzToShadowIndexToRect["delete"](dz);
-  }
-
   /**
    * Caches the coordinates of the shadow element when it's in a certain index in a certain dropzone.
    * Helpful in order to determine "would be index" more effectively
@@ -634,102 +603,6 @@
     };
   }
 
-  var SCROLL_ZONE_PX = 25;
-  function makeScroller() {
-    var scrollingInfo;
-    function resetScrolling() {
-      scrollingInfo = {
-        directionObj: undefined,
-        stepPx: 0
-      };
-    }
-    resetScrolling();
-    // directionObj {x: 0|1|-1, y:0|1|-1} - 1 means down in y and right in x
-    function scrollContainer(containerEl) {
-      var _scrollingInfo = scrollingInfo,
-        directionObj = _scrollingInfo.directionObj,
-        stepPx = _scrollingInfo.stepPx;
-      if (directionObj) {
-        containerEl.scrollBy(directionObj.x * stepPx, directionObj.y * stepPx);
-        window.requestAnimationFrame(function () {
-          return scrollContainer(containerEl);
-        });
-      }
-    }
-    function calcScrollStepPx(distancePx) {
-      return SCROLL_ZONE_PX - distancePx;
-    }
-
-    /**
-     * If the pointer is next to the sides of the element to scroll, will trigger scrolling
-     * Can be called repeatedly with updated pointer and elementToScroll values without issues
-     * @return {boolean} - true if scrolling was needed
-     */
-    function scrollIfNeeded(pointer, elementToScroll) {
-      if (!elementToScroll) {
-        return false;
-      }
-      var distances = calcInnerDistancesBetweenPointAndSidesOfElement(pointer, elementToScroll);
-      if (distances === null) {
-        resetScrolling();
-        return false;
-      }
-      var isAlreadyScrolling = !!scrollingInfo.directionObj;
-      var scrollingVertically = false,
-        scrollingHorizontally = false;
-      // vertical
-      if (elementToScroll.scrollHeight > elementToScroll.clientHeight) {
-        if (distances.bottom < SCROLL_ZONE_PX) {
-          scrollingVertically = true;
-          scrollingInfo.directionObj = {
-            x: 0,
-            y: 1
-          };
-          scrollingInfo.stepPx = calcScrollStepPx(distances.bottom);
-        } else if (distances.top < SCROLL_ZONE_PX) {
-          scrollingVertically = true;
-          scrollingInfo.directionObj = {
-            x: 0,
-            y: -1
-          };
-          scrollingInfo.stepPx = calcScrollStepPx(distances.top);
-        }
-        if (!isAlreadyScrolling && scrollingVertically) {
-          scrollContainer(elementToScroll);
-          return true;
-        }
-      }
-      // horizontal
-      if (elementToScroll.scrollWidth > elementToScroll.clientWidth) {
-        if (distances.right < SCROLL_ZONE_PX) {
-          scrollingHorizontally = true;
-          scrollingInfo.directionObj = {
-            x: 1,
-            y: 0
-          };
-          scrollingInfo.stepPx = calcScrollStepPx(distances.right);
-        } else if (distances.left < SCROLL_ZONE_PX) {
-          scrollingHorizontally = true;
-          scrollingInfo.directionObj = {
-            x: -1,
-            y: 0
-          };
-          scrollingInfo.stepPx = calcScrollStepPx(distances.left);
-        }
-        if (!isAlreadyScrolling && scrollingHorizontally) {
-          scrollContainer(elementToScroll);
-          return true;
-        }
-      }
-      resetScrolling();
-      return false;
-    }
-    return {
-      scrollIfNeeded: scrollIfNeeded,
-      resetScrolling: resetScrolling
-    };
-  }
-
   /**
    * @param {Object} object
    * @return {string}
@@ -795,9 +668,6 @@
 
   var INTERVAL_MS = 200;
   var TOLERANCE_PX = 10;
-  var _makeScroller = makeScroller(),
-    scrollIfNeeded = _makeScroller.scrollIfNeeded,
-    resetScrolling = _makeScroller.resetScrolling;
   var next;
 
   /**
@@ -805,9 +675,11 @@
    * @param {Set<HTMLElement>} dropZones
    * @param {HTMLElement} draggedEl
    * @param {number} [intervalMs = INTERVAL_MS]
+   * @param {MultiScroller} multiScroller
    */
   function observe(draggedEl, dropZones) {
     var intervalMs = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : INTERVAL_MS;
+    var multiScroller = arguments.length > 3 ? arguments[3] : undefined;
     // initialization
     var lastDropZoneFound;
     var lastIndexFound;
@@ -823,7 +695,7 @@
      */
     function andNow() {
       var currentCenterOfDragged = findCenterOfElement(draggedEl);
-      var scrolled = scrollIfNeeded(currentCenterOfDragged, lastDropZoneFound);
+      var scrolled = multiScroller.multiScrollIfNeeded();
       // we only want to make a new decision after the element was moved a bit to prevent flickering
       if (!scrolled && lastCentrePositionOfDragged && Math.abs(lastCentrePositionOfDragged.x - currentCenterOfDragged.x) < TOLERANCE_PX && Math.abs(lastCentrePositionOfDragged.y - currentCenterOfDragged.y) < TOLERANCE_PX) {
         next = window.setTimeout(andNow, intervalMs);
@@ -844,7 +716,7 @@
       try {
         for (_iterator.s(); !(_step = _iterator.n()).done;) {
           var dz = _step.value;
-          if (scrolled) resetIndexesCacheForDz(lastDropZoneFound);
+          if (scrolled) resetIndexesCache();
           var indexObj = findWouldBeIndex(draggedEl, dz);
           if (indexObj === null) {
             // it is not inside
@@ -889,61 +761,225 @@
       return "unobserving";
     });
     clearTimeout(next);
-    resetScrolling();
     resetIndexesCache();
   }
 
-  var INTERVAL_MS$1 = 300;
-  var mousePosition;
+  var SCROLL_ZONE_PX = 30;
 
   /**
-   * Do not use this! it is visible for testing only until we get over the issue Cypress not triggering the mousemove listeners
-   * // TODO - make private (remove export)
-   * @param {{clientX: number, clientY: number}} e
+   * Will make a scroller that can scroll any element given to it in any direction
+   * @returns {{scrollIfNeeded: function(Point, HTMLElement): boolean, resetScrolling: function(void):void}}
    */
-  function updateMousePosition(e) {
-    var c = e.touches ? e.touches[0] : e;
-    mousePosition = {
-      x: c.clientX,
-      y: c.clientY
-    };
-  }
-  var _makeScroller$1 = makeScroller(),
-    scrollIfNeeded$1 = _makeScroller$1.scrollIfNeeded,
-    resetScrolling$1 = _makeScroller$1.resetScrolling;
-  var next$1;
-  function loop() {
-    if (mousePosition) {
-      var scrolled = scrollIfNeeded$1(mousePosition, document.documentElement);
-      if (scrolled) resetIndexesCache();
+  function makeScroller() {
+    var scrollingInfo;
+    function resetScrolling() {
+      scrollingInfo = {
+        directionObj: undefined,
+        stepPx: 0
+      };
     }
-    next$1 = window.setTimeout(loop, INTERVAL_MS$1);
+    resetScrolling();
+    // directionObj {x: 0|1|-1, y:0|1|-1} - 1 means down in y and right in x
+    function scrollContainer(containerEl) {
+      var _scrollingInfo = scrollingInfo,
+        directionObj = _scrollingInfo.directionObj,
+        stepPx = _scrollingInfo.stepPx;
+      if (directionObj) {
+        containerEl.scrollBy(directionObj.x * stepPx, directionObj.y * stepPx);
+        window.requestAnimationFrame(function () {
+          return scrollContainer(containerEl);
+        });
+      }
+    }
+    function calcScrollStepPx(distancePx) {
+      return SCROLL_ZONE_PX - distancePx;
+    }
+
+    /**
+     * @param {Point} pointer - the pointer will be used to decide in which direction to scroll
+     * @param {HTMLElement} elementToScroll - the scroll container
+     * If the pointer is next to the sides of the element to scroll, will trigger scrolling
+     * Can be called repeatedly with updated pointer and elementToScroll values without issues
+     * @return {boolean} - true if scrolling was needed
+     */
+    function scrollIfNeeded(pointer, elementToScroll) {
+      if (!elementToScroll) {
+        return false;
+      }
+      var distances = calcInnerDistancesBetweenPointAndSidesOfElement(pointer, elementToScroll);
+      if (distances === null) {
+        resetScrolling();
+        return false;
+      }
+      var isAlreadyScrolling = !!scrollingInfo.directionObj;
+      var scrollingVertically = false,
+        scrollingHorizontally = false;
+      // vertical
+      if (elementToScroll.scrollHeight > elementToScroll.clientHeight) {
+        if (distances.bottom < SCROLL_ZONE_PX) {
+          scrollingVertically = true;
+          scrollingInfo.directionObj = {
+            x: 0,
+            y: 1
+          };
+          scrollingInfo.stepPx = calcScrollStepPx(distances.bottom);
+        } else if (distances.top < SCROLL_ZONE_PX) {
+          scrollingVertically = true;
+          scrollingInfo.directionObj = {
+            x: 0,
+            y: -1
+          };
+          scrollingInfo.stepPx = calcScrollStepPx(distances.top);
+        }
+        if (!isAlreadyScrolling && scrollingVertically) {
+          scrollContainer(elementToScroll);
+          return true;
+        }
+      }
+      // horizontal
+      if (elementToScroll.scrollWidth > elementToScroll.clientWidth) {
+        if (distances.right < SCROLL_ZONE_PX) {
+          scrollingHorizontally = true;
+          scrollingInfo.directionObj = {
+            x: 1,
+            y: 0
+          };
+          scrollingInfo.stepPx = calcScrollStepPx(distances.right);
+        } else if (distances.left < SCROLL_ZONE_PX) {
+          scrollingHorizontally = true;
+          scrollingInfo.directionObj = {
+            x: -1,
+            y: 0
+          };
+          scrollingInfo.stepPx = calcScrollStepPx(distances.left);
+        }
+        if (!isAlreadyScrolling && scrollingHorizontally) {
+          scrollContainer(elementToScroll);
+          return true;
+        }
+      }
+      resetScrolling();
+      return false;
+    }
+    return {
+      scrollIfNeeded: scrollIfNeeded,
+      resetScrolling: resetScrolling
+    };
   }
 
   /**
-   * will start watching the mouse pointer and scroll the window if it goes next to the edges
+   * If the point is inside the element returns its distances from the sides, otherwise returns null
+   * @param {Point} point
+   * @param {HTMLElement} el
+   * @return {null|{top: number, left: number, bottom: number, right: number}}
    */
-  function armWindowScroller() {
-    printDebug(function () {
-      return "arming window scroller";
-    });
-    window.addEventListener("mousemove", updateMousePosition);
-    window.addEventListener("touchmove", updateMousePosition);
-    loop();
+  function calcInnerDistancesBetweenPointAndSidesOfElement(point, el) {
+    // Even if the scrolling element is small it acts as a scroller for the viewport
+    var rect = el === document.scrollingElement ? {
+      top: 0,
+      bottom: window.innerHeight,
+      left: 0,
+      right: window.innerWidth
+    } : el.getBoundingClientRect();
+    if (!isPointInsideRect(point, rect)) {
+      return null;
+    }
+    return {
+      top: point.y - rect.top,
+      bottom: rect.bottom - point.y,
+      left: point.x - rect.left,
+      right: rect.right - point.x
+    };
   }
 
   /**
-   * will stop watching the mouse pointer and won't scroll the window anymore
+   @typedef {Object} MultiScroller
+   @property {function():boolean} multiScrollIfNeeded - call this on every "tick" to scroll containers if needed, returns true if anything was scrolled
+  /**
+   * Creates a scroller than can scroll any of the provided containers or any of their scrollable parents (including the document's scrolling element)
+   * @param {HTMLElement[]} baseElementsForScrolling
+   * @param {function():Point} getPointerPosition
+   * @return {MultiScroller}
    */
-  function disarmWindowScroller() {
+  function createMultiScroller() {
+    var baseElementsForScrolling = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+    var getPointerPosition = arguments.length > 1 ? arguments[1] : undefined;
     printDebug(function () {
-      return "disarming window scroller";
+      return "creating multi-scroller";
+    });
+    var scrollingContainersSet = findRelevantScrollContainers(baseElementsForScrolling);
+    var scrollingContainersDeepToShallow = Array.from(scrollingContainersSet).sort(function (dz1, dz2) {
+      return getDepth(dz2) - getDepth(dz1);
     });
-    window.removeEventListener("mousemove", updateMousePosition);
-    window.removeEventListener("touchmove", updateMousePosition);
-    mousePosition = undefined;
-    window.clearTimeout(next$1);
-    resetScrolling$1();
+    var _makeScroller = makeScroller(),
+      scrollIfNeeded = _makeScroller.scrollIfNeeded;
+
+    /**
+     * @return {boolean} - was any container scrolled
+     */
+    function tick() {
+      var mousePosition = getPointerPosition();
+      if (!mousePosition || !scrollingContainersDeepToShallow) {
+        return false;
+      }
+      var scrollContainersUnderCursor = scrollingContainersDeepToShallow.filter(function (el) {
+        return isPointInsideRect(mousePosition, el.getBoundingClientRect()) || el === document.scrollingElement;
+      });
+      for (var i = 0; i < scrollContainersUnderCursor.length; i++) {
+        var scrolled = scrollIfNeeded(mousePosition, scrollContainersUnderCursor[i]);
+        if (scrolled) {
+          return true;
+        }
+      }
+      return false;
+    }
+    return {
+      multiScrollIfNeeded: scrollingContainersSet.size > 0 ? tick : function () {
+        return false;
+      }
+    };
+  }
+
+  // internal utils
+  function findScrollableParents(element) {
+    if (!element) {
+      return [];
+    }
+    var scrollableContainers = [];
+    var parent = element;
+    while (parent) {
+      var _window$getComputedSt = window.getComputedStyle(parent),
+        overflow = _window$getComputedSt.overflow;
+      if (overflow.split(" ").some(function (o) {
+        return o.includes("auto") || o.includes("scroll");
+      })) {
+        scrollableContainers.push(parent);
+      }
+      parent = parent.parentElement;
+    }
+    return scrollableContainers;
+  }
+  function findRelevantScrollContainers(dropZones) {
+    var scrollingContainers = new Set();
+    var _iterator = _createForOfIteratorHelper(dropZones),
+      _step;
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var dz = _step.value;
+        findScrollableParents(dz).forEach(function (container) {
+          return scrollingContainers.add(container);
+        });
+      }
+      // The scrolling element might have overflow visible and still be scrollable
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+    if (document.scrollingElement.scrollHeight > document.scrollingElement.clientHeight || document.scrollingElement.scrollWidth > document.scrollingElement.clientHeight) {
+      scrollingContainers.add(document.scrollingElement);
+    }
+    return scrollingContainers;
   }
 
   /**
@@ -1292,7 +1328,6 @@
     printDebug(function () {
       return "watching dragged element";
     });
-    armWindowScroller();
     var dropZones = typeToDropZones.get(draggedElType);
     var _iterator = _createForOfIteratorHelper(dropZones),
       _step;
@@ -1309,18 +1344,21 @@
       _iterator.f();
     }
     window.addEventListener(DRAGGED_LEFT_DOCUMENT_EVENT_NAME, handleDrop);
+
     // it is important that we don't have an interval that is faster than the flip duration because it can cause elements to jump bach and forth
     var setIntervalMs = Math.max.apply(Math, _toConsumableArray(Array.from(dropZones.keys()).map(function (dz) {
       return dzToConfig.get(dz).dropAnimationDurationMs;
     })));
-    var observationIntervalMs = setIntervalMs === 0 ? DISABLED_OBSERVATION_INTERVAL_MS : Math.max(setIntervalMs, MIN_OBSERVATION_INTERVAL_MS); //if setintervalms is 0 it goes to 20, otherwise it is max between it and min observation.
-    observe(draggedEl, dropZones, observationIntervalMs * 1.07);
+    var observationIntervalMs = setIntervalMs === 0 ? DISABLED_OBSERVATION_INTERVAL_MS : Math.max(setIntervalMs, MIN_OBSERVATION_INTERVAL_MS); // if setIntervalMs is 0 it goes to 20, otherwise it is max between it and min observation.
+    var multiScroller = createMultiScroller(dropZones, function () {
+      return currentMousePosition;
+    });
+    observe(draggedEl, dropZones, observationIntervalMs * 1.07, multiScroller);
   }
   function unWatchDraggedElement() {
     printDebug(function () {
       return "unwatching dragged element";
     });
-    disarmWindowScroller();
     var dropZones = typeToDropZones.get(draggedElType);
     var _iterator2 = _createForOfIteratorHelper(dropZones),
       _step2;

package/dist/index.mjs

@@ -495,33 +495,13 @@ function calcDistanceBetweenCenters(elA, elB) {
 
 /**
  * @param {HTMLElement} el - the element to check
- * @returns {boolean} - true if the element in its entirety is off screen including the scrollable area (the normal dom events look at the mouse rather than the element)
+ * @returns {boolean} - true if the element in its entirety is off-screen including the scrollable area (the normal dom events look at the mouse rather than the element)
  */
 function isElementOffDocument(el) {
   var rect = getAbsoluteRect(el);
   return rect.right < 0 || rect.left > document.documentElement.scrollWidth || rect.bottom < 0 || rect.top > document.documentElement.scrollHeight;
 }
 
-/**
- * If the point is inside the element returns its distances from the sides, otherwise returns null
- * @param {Point} point
- * @param {HTMLElement} el
- * @return {null|{top: number, left: number, bottom: number, right: number}}
- */
-function calcInnerDistancesBetweenPointAndSidesOfElement(point, el) {
-  var rect = getAbsoluteRect(el);
-  if (!isPointInsideRect(point, rect)) {
-    return null;
-  }
-  return {
-    top: point.y - rect.top,
-    bottom: rect.bottom - point.y,
-    left: point.x - rect.left,
-    // TODO - figure out what is so special about right (why the rect is too big)
-    right: Math.min(rect.right, document.documentElement.clientWidth) - point.x
-  };
-}
-
 var dzToShadowIndexToRect;
 
 /**
@@ -535,17 +515,6 @@ function resetIndexesCache() {
 }
 resetIndexesCache();
 
-/**
- * Resets the cache that allows for smarter "would be index" resolution for a specific dropzone, should be called after the zone was scrolled
- * @param {HTMLElement} dz
- */
-function resetIndexesCacheForDz(dz) {
-  printDebug(function () {
-    return "resetting indexes cache for dz";
-  });
-  dzToShadowIndexToRect["delete"](dz);
-}
-
 /**
  * Caches the coordinates of the shadow element when it's in a certain index in a certain dropzone.
  * Helpful in order to determine "would be index" more effectively
@@ -628,102 +597,6 @@ function findWouldBeIndex(floatingAboveEl, collectionBelowEl) {
   };
 }
 
-var SCROLL_ZONE_PX = 25;
-function makeScroller() {
-  var scrollingInfo;
-  function resetScrolling() {
-    scrollingInfo = {
-      directionObj: undefined,
-      stepPx: 0
-    };
-  }
-  resetScrolling();
-  // directionObj {x: 0|1|-1, y:0|1|-1} - 1 means down in y and right in x
-  function scrollContainer(containerEl) {
-    var _scrollingInfo = scrollingInfo,
-      directionObj = _scrollingInfo.directionObj,
-      stepPx = _scrollingInfo.stepPx;
-    if (directionObj) {
-      containerEl.scrollBy(directionObj.x * stepPx, directionObj.y * stepPx);
-      window.requestAnimationFrame(function () {
-        return scrollContainer(containerEl);
-      });
-    }
-  }
-  function calcScrollStepPx(distancePx) {
-    return SCROLL_ZONE_PX - distancePx;
-  }
-
-  /**
-   * If the pointer is next to the sides of the element to scroll, will trigger scrolling
-   * Can be called repeatedly with updated pointer and elementToScroll values without issues
-   * @return {boolean} - true if scrolling was needed
-   */
-  function scrollIfNeeded(pointer, elementToScroll) {
-    if (!elementToScroll) {
-      return false;
-    }
-    var distances = calcInnerDistancesBetweenPointAndSidesOfElement(pointer, elementToScroll);
-    if (distances === null) {
-      resetScrolling();
-      return false;
-    }
-    var isAlreadyScrolling = !!scrollingInfo.directionObj;
-    var scrollingVertically = false,
-      scrollingHorizontally = false;
-    // vertical
-    if (elementToScroll.scrollHeight > elementToScroll.clientHeight) {
-      if (distances.bottom < SCROLL_ZONE_PX) {
-        scrollingVertically = true;
-        scrollingInfo.directionObj = {
-          x: 0,
-          y: 1
-        };
-        scrollingInfo.stepPx = calcScrollStepPx(distances.bottom);
-      } else if (distances.top < SCROLL_ZONE_PX) {
-        scrollingVertically = true;
-        scrollingInfo.directionObj = {
-          x: 0,
-          y: -1
-        };
-        scrollingInfo.stepPx = calcScrollStepPx(distances.top);
-      }
-      if (!isAlreadyScrolling && scrollingVertically) {
-        scrollContainer(elementToScroll);
-        return true;
-      }
-    }
-    // horizontal
-    if (elementToScroll.scrollWidth > elementToScroll.clientWidth) {
-      if (distances.right < SCROLL_ZONE_PX) {
-        scrollingHorizontally = true;
-        scrollingInfo.directionObj = {
-          x: 1,
-          y: 0
-        };
-        scrollingInfo.stepPx = calcScrollStepPx(distances.right);
-      } else if (distances.left < SCROLL_ZONE_PX) {
-        scrollingHorizontally = true;
-        scrollingInfo.directionObj = {
-          x: -1,
-          y: 0
-        };
-        scrollingInfo.stepPx = calcScrollStepPx(distances.left);
-      }
-      if (!isAlreadyScrolling && scrollingHorizontally) {
-        scrollContainer(elementToScroll);
-        return true;
-      }
-    }
-    resetScrolling();
-    return false;
-  }
-  return {
-    scrollIfNeeded: scrollIfNeeded,
-    resetScrolling: resetScrolling
-  };
-}
-
 /**
  * @param {Object} object
  * @return {string}
@@ -789,9 +662,6 @@ function areArraysShallowEqualSameOrder(arrA, arrB) {
 
 var INTERVAL_MS = 200;
 var TOLERANCE_PX = 10;
-var _makeScroller = makeScroller(),
-  scrollIfNeeded = _makeScroller.scrollIfNeeded,
-  resetScrolling = _makeScroller.resetScrolling;
 var next;
 
 /**
@@ -799,9 +669,11 @@ var next;
  * @param {Set<HTMLElement>} dropZones
  * @param {HTMLElement} draggedEl
  * @param {number} [intervalMs = INTERVAL_MS]
+ * @param {MultiScroller} multiScroller
  */
 function observe(draggedEl, dropZones) {
   var intervalMs = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : INTERVAL_MS;
+  var multiScroller = arguments.length > 3 ? arguments[3] : undefined;
   // initialization
   var lastDropZoneFound;
   var lastIndexFound;
@@ -817,7 +689,7 @@ function observe(draggedEl, dropZones) {
    */
   function andNow() {
     var currentCenterOfDragged = findCenterOfElement(draggedEl);
-    var scrolled = scrollIfNeeded(currentCenterOfDragged, lastDropZoneFound);
+    var scrolled = multiScroller.multiScrollIfNeeded();
     // we only want to make a new decision after the element was moved a bit to prevent flickering
     if (!scrolled && lastCentrePositionOfDragged && Math.abs(lastCentrePositionOfDragged.x - currentCenterOfDragged.x) < TOLERANCE_PX && Math.abs(lastCentrePositionOfDragged.y - currentCenterOfDragged.y) < TOLERANCE_PX) {
       next = window.setTimeout(andNow, intervalMs);
@@ -838,7 +710,7 @@ function observe(draggedEl, dropZones) {
     try {
       for (_iterator.s(); !(_step = _iterator.n()).done;) {
         var dz = _step.value;
-        if (scrolled) resetIndexesCacheForDz(lastDropZoneFound);
+        if (scrolled) resetIndexesCache();
         var indexObj = findWouldBeIndex(draggedEl, dz);
         if (indexObj === null) {
           // it is not inside
@@ -883,61 +755,225 @@ function unobserve() {
     return "unobserving";
   });
   clearTimeout(next);
-  resetScrolling();
   resetIndexesCache();
 }
 
-var INTERVAL_MS$1 = 300;
-var mousePosition;
+var SCROLL_ZONE_PX = 30;
 
 /**
- * Do not use this! it is visible for testing only until we get over the issue Cypress not triggering the mousemove listeners
- * // TODO - make private (remove export)
- * @param {{clientX: number, clientY: number}} e
+ * Will make a scroller that can scroll any element given to it in any direction
+ * @returns {{scrollIfNeeded: function(Point, HTMLElement): boolean, resetScrolling: function(void):void}}
  */
-function updateMousePosition(e) {
-  var c = e.touches ? e.touches[0] : e;
-  mousePosition = {
-    x: c.clientX,
-    y: c.clientY
-  };
-}
-var _makeScroller$1 = makeScroller(),
-  scrollIfNeeded$1 = _makeScroller$1.scrollIfNeeded,
-  resetScrolling$1 = _makeScroller$1.resetScrolling;
-var next$1;
-function loop() {
-  if (mousePosition) {
-    var scrolled = scrollIfNeeded$1(mousePosition, document.documentElement);
-    if (scrolled) resetIndexesCache();
+function makeScroller() {
+  var scrollingInfo;
+  function resetScrolling() {
+    scrollingInfo = {
+      directionObj: undefined,
+      stepPx: 0
+    };
   }
-  next$1 = window.setTimeout(loop, INTERVAL_MS$1);
+  resetScrolling();
+  // directionObj {x: 0|1|-1, y:0|1|-1} - 1 means down in y and right in x
+  function scrollContainer(containerEl) {
+    var _scrollingInfo = scrollingInfo,
+      directionObj = _scrollingInfo.directionObj,
+      stepPx = _scrollingInfo.stepPx;
+    if (directionObj) {
+      containerEl.scrollBy(directionObj.x * stepPx, directionObj.y * stepPx);
+      window.requestAnimationFrame(function () {
+        return scrollContainer(containerEl);
+      });
+    }
+  }
+  function calcScrollStepPx(distancePx) {
+    return SCROLL_ZONE_PX - distancePx;
+  }
+
+  /**
+   * @param {Point} pointer - the pointer will be used to decide in which direction to scroll
+   * @param {HTMLElement} elementToScroll - the scroll container
+   * If the pointer is next to the sides of the element to scroll, will trigger scrolling
+   * Can be called repeatedly with updated pointer and elementToScroll values without issues
+   * @return {boolean} - true if scrolling was needed
+   */
+  function scrollIfNeeded(pointer, elementToScroll) {
+    if (!elementToScroll) {
+      return false;
+    }
+    var distances = calcInnerDistancesBetweenPointAndSidesOfElement(pointer, elementToScroll);
+    if (distances === null) {
+      resetScrolling();
+      return false;
+    }
+    var isAlreadyScrolling = !!scrollingInfo.directionObj;
+    var scrollingVertically = false,
+      scrollingHorizontally = false;
+    // vertical
+    if (elementToScroll.scrollHeight > elementToScroll.clientHeight) {
+      if (distances.bottom < SCROLL_ZONE_PX) {
+        scrollingVertically = true;
+        scrollingInfo.directionObj = {
+          x: 0,
+          y: 1
+        };
+        scrollingInfo.stepPx = calcScrollStepPx(distances.bottom);
+      } else if (distances.top < SCROLL_ZONE_PX) {
+        scrollingVertically = true;
+        scrollingInfo.directionObj = {
+          x: 0,
+          y: -1
+        };
+        scrollingInfo.stepPx = calcScrollStepPx(distances.top);
+      }
+      if (!isAlreadyScrolling && scrollingVertically) {
+        scrollContainer(elementToScroll);
+        return true;
+      }
+    }
+    // horizontal
+    if (elementToScroll.scrollWidth > elementToScroll.clientWidth) {
+      if (distances.right < SCROLL_ZONE_PX) {
+        scrollingHorizontally = true;
+        scrollingInfo.directionObj = {
+          x: 1,
+          y: 0
+        };
+        scrollingInfo.stepPx = calcScrollStepPx(distances.right);
+      } else if (distances.left < SCROLL_ZONE_PX) {
+        scrollingHorizontally = true;
+        scrollingInfo.directionObj = {
+          x: -1,
+          y: 0
+        };
+        scrollingInfo.stepPx = calcScrollStepPx(distances.left);
+      }
+      if (!isAlreadyScrolling && scrollingHorizontally) {
+        scrollContainer(elementToScroll);
+        return true;
+      }
+    }
+    resetScrolling();
+    return false;
+  }
+  return {
+    scrollIfNeeded: scrollIfNeeded,
+    resetScrolling: resetScrolling
+  };
 }
 
 /**
- * will start watching the mouse pointer and scroll the window if it goes next to the edges
+ * If the point is inside the element returns its distances from the sides, otherwise returns null
+ * @param {Point} point
+ * @param {HTMLElement} el
+ * @return {null|{top: number, left: number, bottom: number, right: number}}
  */
-function armWindowScroller() {
-  printDebug(function () {
-    return "arming window scroller";
-  });
-  window.addEventListener("mousemove", updateMousePosition);
-  window.addEventListener("touchmove", updateMousePosition);
-  loop();
+function calcInnerDistancesBetweenPointAndSidesOfElement(point, el) {
+  // Even if the scrolling element is small it acts as a scroller for the viewport
+  var rect = el === document.scrollingElement ? {
+    top: 0,
+    bottom: window.innerHeight,
+    left: 0,
+    right: window.innerWidth
+  } : el.getBoundingClientRect();
+  if (!isPointInsideRect(point, rect)) {
+    return null;
+  }
+  return {
+    top: point.y - rect.top,
+    bottom: rect.bottom - point.y,
+    left: point.x - rect.left,
+    right: rect.right - point.x
+  };
 }
 
 /**
- * will stop watching the mouse pointer and won't scroll the window anymore
+ @typedef {Object} MultiScroller
+ @property {function():boolean} multiScrollIfNeeded - call this on every "tick" to scroll containers if needed, returns true if anything was scrolled
+/**
+ * Creates a scroller than can scroll any of the provided containers or any of their scrollable parents (including the document's scrolling element)
+ * @param {HTMLElement[]} baseElementsForScrolling
+ * @param {function():Point} getPointerPosition
+ * @return {MultiScroller}
  */
-function disarmWindowScroller() {
+function createMultiScroller() {
+  var baseElementsForScrolling = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  var getPointerPosition = arguments.length > 1 ? arguments[1] : undefined;
   printDebug(function () {
-    return "disarming window scroller";
+    return "creating multi-scroller";
+  });
+  var scrollingContainersSet = findRelevantScrollContainers(baseElementsForScrolling);
+  var scrollingContainersDeepToShallow = Array.from(scrollingContainersSet).sort(function (dz1, dz2) {
+    return getDepth(dz2) - getDepth(dz1);
   });
-  window.removeEventListener("mousemove", updateMousePosition);
-  window.removeEventListener("touchmove", updateMousePosition);
-  mousePosition = undefined;
-  window.clearTimeout(next$1);
-  resetScrolling$1();
+  var _makeScroller = makeScroller(),
+    scrollIfNeeded = _makeScroller.scrollIfNeeded;
+
+  /**
+   * @return {boolean} - was any container scrolled
+   */
+  function tick() {
+    var mousePosition = getPointerPosition();
+    if (!mousePosition || !scrollingContainersDeepToShallow) {
+      return false;
+    }
+    var scrollContainersUnderCursor = scrollingContainersDeepToShallow.filter(function (el) {
+      return isPointInsideRect(mousePosition, el.getBoundingClientRect()) || el === document.scrollingElement;
+    });
+    for (var i = 0; i < scrollContainersUnderCursor.length; i++) {
+      var scrolled = scrollIfNeeded(mousePosition, scrollContainersUnderCursor[i]);
+      if (scrolled) {
+        return true;
+      }
+    }
+    return false;
+  }
+  return {
+    multiScrollIfNeeded: scrollingContainersSet.size > 0 ? tick : function () {
+      return false;
+    }
+  };
+}
+
+// internal utils
+function findScrollableParents(element) {
+  if (!element) {
+    return [];
+  }
+  var scrollableContainers = [];
+  var parent = element;
+  while (parent) {
+    var _window$getComputedSt = window.getComputedStyle(parent),
+      overflow = _window$getComputedSt.overflow;
+    if (overflow.split(" ").some(function (o) {
+      return o.includes("auto") || o.includes("scroll");
+    })) {
+      scrollableContainers.push(parent);
+    }
+    parent = parent.parentElement;
+  }
+  return scrollableContainers;
+}
+function findRelevantScrollContainers(dropZones) {
+  var scrollingContainers = new Set();
+  var _iterator = _createForOfIteratorHelper(dropZones),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var dz = _step.value;
+      findScrollableParents(dz).forEach(function (container) {
+        return scrollingContainers.add(container);
+      });
+    }
+    // The scrolling element might have overflow visible and still be scrollable
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  if (document.scrollingElement.scrollHeight > document.scrollingElement.clientHeight || document.scrollingElement.scrollWidth > document.scrollingElement.clientHeight) {
+    scrollingContainers.add(document.scrollingElement);
+  }
+  return scrollingContainers;
 }
 
 /**
@@ -1286,7 +1322,6 @@ function watchDraggedElement() {
   printDebug(function () {
     return "watching dragged element";
   });
-  armWindowScroller();
   var dropZones = typeToDropZones.get(draggedElType);
   var _iterator = _createForOfIteratorHelper(dropZones),
     _step;
@@ -1303,18 +1338,21 @@ function watchDraggedElement() {
     _iterator.f();
   }
   window.addEventListener(DRAGGED_LEFT_DOCUMENT_EVENT_NAME, handleDrop);
+
   // it is important that we don't have an interval that is faster than the flip duration because it can cause elements to jump bach and forth
   var setIntervalMs = Math.max.apply(Math, _toConsumableArray(Array.from(dropZones.keys()).map(function (dz) {
     return dzToConfig.get(dz).dropAnimationDurationMs;
   })));
-  var observationIntervalMs = setIntervalMs === 0 ? DISABLED_OBSERVATION_INTERVAL_MS : Math.max(setIntervalMs, MIN_OBSERVATION_INTERVAL_MS); //if setintervalms is 0 it goes to 20, otherwise it is max between it and min observation.
-  observe(draggedEl, dropZones, observationIntervalMs * 1.07);
+  var observationIntervalMs = setIntervalMs === 0 ? DISABLED_OBSERVATION_INTERVAL_MS : Math.max(setIntervalMs, MIN_OBSERVATION_INTERVAL_MS); // if setIntervalMs is 0 it goes to 20, otherwise it is max between it and min observation.
+  var multiScroller = createMultiScroller(dropZones, function () {
+    return currentMousePosition;
+  });
+  observe(draggedEl, dropZones, observationIntervalMs * 1.07, multiScroller);
 }
 function unWatchDraggedElement() {
   printDebug(function () {
     return "unwatching dragged element";
   });
-  disarmWindowScroller();
   var dropZones = typeToDropZones.get(draggedElType);
   var _iterator2 = _createForOfIteratorHelper(dropZones),
     _step2;

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "svelte-dnd-action",
     "description": "*An awesome drag and drop library for Svelte 3 and 4 (not using the browser's built-in dnd, thanks god): Rich animations, nested containers, touch support and more *",
-    "version": "0.9.40",
+    "version": "0.9.41",
     "repository": {
         "type": "git",
         "url": "git+https://github.com/isaacHagoel/svelte-dnd-action.git"

package/src/helpers/intersection.js

@@ -150,29 +150,9 @@ export function calcDistanceBetweenCenters(elA, elB) {
 
 /**
  * @param {HTMLElement} el - the element to check
- * @returns {boolean} - true if the element in its entirety is off screen including the scrollable area (the normal dom events look at the mouse rather than the element)
+ * @returns {boolean} - true if the element in its entirety is off-screen including the scrollable area (the normal dom events look at the mouse rather than the element)
  */
 export function isElementOffDocument(el) {
     const rect = getAbsoluteRect(el);
     return rect.right < 0 || rect.left > document.documentElement.scrollWidth || rect.bottom < 0 || rect.top > document.documentElement.scrollHeight;
 }
-
-/**
- * If the point is inside the element returns its distances from the sides, otherwise returns null
- * @param {Point} point
- * @param {HTMLElement} el
- * @return {null|{top: number, left: number, bottom: number, right: number}}
- */
-export function calcInnerDistancesBetweenPointAndSidesOfElement(point, el) {
-    const rect = getAbsoluteRect(el);
-    if (!isPointInsideRect(point, rect)) {
-        return null;
-    }
-    return {
-        top: point.y - rect.top,
-        bottom: rect.bottom - point.y,
-        left: point.x - rect.left,
-        // TODO - figure out what is so special about right (why the rect is too big)
-        right: Math.min(rect.right, document.documentElement.clientWidth) - point.x
-    };
-}

package/src/helpers/listUtil.js

@@ -12,15 +12,6 @@ export function resetIndexesCache() {
 }
 resetIndexesCache();
 
-/**
- * Resets the cache that allows for smarter "would be index" resolution for a specific dropzone, should be called after the zone was scrolled
- * @param {HTMLElement} dz
- */
-export function resetIndexesCacheForDz(dz) {
-    printDebug(() => "resetting indexes cache for dz");
-    dzToShadowIndexToRect.delete(dz);
-}
-
 /**
  * Caches the coordinates of the shadow element when it's in a certain index in a certain dropzone.
  * Helpful in order to determine "would be index" more effectively

package/src/helpers/multiScroller.js

@@ -0,0 +1,74 @@
+import {makeScroller} from "./scroller";
+import {printDebug} from "../constants";
+import {getDepth} from "./util";
+import {isPointInsideRect} from "./intersection";
+
+/**
+ @typedef {Object} MultiScroller
+ @property {function():boolean} multiScrollIfNeeded - call this on every "tick" to scroll containers if needed, returns true if anything was scrolled
+/**
+ * Creates a scroller than can scroll any of the provided containers or any of their scrollable parents (including the document's scrolling element)
+ * @param {HTMLElement[]} baseElementsForScrolling
+ * @param {function():Point} getPointerPosition
+ * @return {MultiScroller}
+ */
+export function createMultiScroller(baseElementsForScrolling = [], getPointerPosition) {
+    printDebug(() => "creating multi-scroller");
+    const scrollingContainersSet = findRelevantScrollContainers(baseElementsForScrolling);
+    const scrollingContainersDeepToShallow = Array.from(scrollingContainersSet).sort((dz1, dz2) => getDepth(dz2) - getDepth(dz1));
+    const {scrollIfNeeded} = makeScroller();
+
+    /**
+     * @return {boolean} - was any container scrolled
+     */
+    function tick() {
+        const mousePosition = getPointerPosition();
+        if (!mousePosition || !scrollingContainersDeepToShallow) {
+            return false;
+        }
+        const scrollContainersUnderCursor = scrollingContainersDeepToShallow.filter(
+            el => isPointInsideRect(mousePosition, el.getBoundingClientRect()) || el === document.scrollingElement
+        );
+        for (let i = 0; i < scrollContainersUnderCursor.length; i++) {
+            const scrolled = scrollIfNeeded(mousePosition, scrollContainersUnderCursor[i]);
+            if (scrolled) {
+                return true;
+            }
+        }
+        return false;
+    }
+    return {
+        multiScrollIfNeeded: scrollingContainersSet.size > 0 ? tick : () => false
+    };
+}
+
+// internal utils
+function findScrollableParents(element) {
+    if (!element) {
+        return [];
+    }
+    const scrollableContainers = [];
+    let parent = element;
+    while (parent) {
+        const {overflow} = window.getComputedStyle(parent);
+        if (overflow.split(" ").some(o => o.includes("auto") || o.includes("scroll"))) {
+            scrollableContainers.push(parent);
+        }
+        parent = parent.parentElement;
+    }
+    return scrollableContainers;
+}
+function findRelevantScrollContainers(dropZones) {
+    const scrollingContainers = new Set();
+    for (let dz of dropZones) {
+        findScrollableParents(dz).forEach(container => scrollingContainers.add(container));
+    }
+    // The scrolling element might have overflow visible and still be scrollable
+    if (
+        document.scrollingElement.scrollHeight > document.scrollingElement.clientHeight ||
+        document.scrollingElement.scrollWidth > document.scrollingElement.clientHeight
+    ) {
+        scrollingContainers.add(document.scrollingElement);
+    }
+    return scrollingContainers;
+}

package/src/helpers/observer.js

@@ -1,4 +1,4 @@
-import {findWouldBeIndex, resetIndexesCache, resetIndexesCacheForDz} from "./listUtil";
+import {findWouldBeIndex, resetIndexesCache} from "./listUtil";
 import {findCenterOfElement, isElementOffDocument} from "./intersection";
 import {
     dispatchDraggedElementEnteredContainer,
@@ -7,13 +7,11 @@ import {
     dispatchDraggedLeftDocument,
     dispatchDraggedElementIsOverIndex
 } from "./dispatcher";
-import {makeScroller} from "./scroller";
 import {getDepth} from "./util";
 import {printDebug} from "../constants";
 
 const INTERVAL_MS = 200;
 const TOLERANCE_PX = 10;
-const {scrollIfNeeded, resetScrolling} = makeScroller();
 let next;
 
 /**
@@ -21,8 +19,9 @@ let next;
  * @param {Set<HTMLElement>} dropZones
  * @param {HTMLElement} draggedEl
  * @param {number} [intervalMs = INTERVAL_MS]
+ * @param {MultiScroller} multiScroller
  */
-export function observe(draggedEl, dropZones, intervalMs = INTERVAL_MS) {
+export function observe(draggedEl, dropZones, intervalMs = INTERVAL_MS, multiScroller) {
     // initialization
     let lastDropZoneFound;
     let lastIndexFound;
@@ -36,7 +35,7 @@ export function observe(draggedEl, dropZones, intervalMs = INTERVAL_MS) {
      */
     function andNow() {
         const currentCenterOfDragged = findCenterOfElement(draggedEl);
-        const scrolled = scrollIfNeeded(currentCenterOfDragged, lastDropZoneFound);
+        const scrolled = multiScroller.multiScrollIfNeeded();
         // we only want to make a new decision after the element was moved a bit to prevent flickering
         if (
             !scrolled &&
@@ -57,7 +56,7 @@ export function observe(draggedEl, dropZones, intervalMs = INTERVAL_MS) {
         // this is a simple algorithm, potential improvement: first look at lastDropZoneFound
         let isDraggedInADropZone = false;
         for (const dz of dropZonesFromDeepToShallow) {
-            if (scrolled) resetIndexesCacheForDz(lastDropZoneFound);
+            if (scrolled) resetIndexesCache();
             const indexObj = findWouldBeIndex(draggedEl, dz);
             if (indexObj === null) {
                 // it is not inside
@@ -95,6 +94,5 @@ export function observe(draggedEl, dropZones, intervalMs = INTERVAL_MS) {
 export function unobserve() {
     printDebug(() => "unobserving");
     clearTimeout(next);
-    resetScrolling();
     resetIndexesCache();
 }

package/src/helpers/scroller.js

@@ -1,6 +1,10 @@
-import {calcInnerDistancesBetweenPointAndSidesOfElement} from "./intersection";
-const SCROLL_ZONE_PX = 25;
+import {isPointInsideRect} from "./intersection";
+const SCROLL_ZONE_PX = 30;
 
+/**
+ * Will make a scroller that can scroll any element given to it in any direction
+ * @returns {{scrollIfNeeded: function(Point, HTMLElement): boolean, resetScrolling: function(void):void}}
+ */
 export function makeScroller() {
     let scrollingInfo;
     function resetScrolling() {
@@ -20,6 +24,8 @@ export function makeScroller() {
     }
 
     /**
+     * @param {Point} pointer - the pointer will be used to decide in which direction to scroll
+     * @param {HTMLElement} elementToScroll - the scroll container
      * If the pointer is next to the sides of the element to scroll, will trigger scrolling
      * Can be called repeatedly with updated pointer and elementToScroll values without issues
      * @return {boolean} - true if scrolling was needed
@@ -76,3 +82,31 @@ export function makeScroller() {
         resetScrolling
     };
 }
+
+/**
+ * If the point is inside the element returns its distances from the sides, otherwise returns null
+ * @param {Point} point
+ * @param {HTMLElement} el
+ * @return {null|{top: number, left: number, bottom: number, right: number}}
+ */
+function calcInnerDistancesBetweenPointAndSidesOfElement(point, el) {
+    // Even if the scrolling element is small it acts as a scroller for the viewport
+    const rect =
+        el === document.scrollingElement
+            ? {
+                  top: 0,
+                  bottom: window.innerHeight,
+                  left: 0,
+                  right: window.innerWidth
+              }
+            : el.getBoundingClientRect();
+    if (!isPointInsideRect(point, rect)) {
+        return null;
+    }
+    return {
+        top: point.y - rect.top,
+        bottom: rect.bottom - point.y,
+        left: point.x - rect.left,
+        right: rect.right - point.x
+    };
+}

package/src/pointerAction.js

@@ -9,7 +9,7 @@ import {
     TRIGGERS
 } from "./constants";
 import {observe, unobserve} from "./helpers/observer";
-import {armWindowScroller, disarmWindowScroller} from "./helpers/windowScroller";
+import {createMultiScroller} from "./helpers/multiScroller";
 import {
     createDraggedElementFrom,
     decorateShadowEl,
@@ -88,22 +88,23 @@ function unregisterDropZone(dropZoneEl, type) {
 /* functions to manage observing the dragged element and trigger custom drag-events */
 function watchDraggedElement() {
     printDebug(() => "watching dragged element");
-    armWindowScroller();
     const dropZones = typeToDropZones.get(draggedElType);
+
     for (const dz of dropZones) {
         dz.addEventListener(DRAGGED_ENTERED_EVENT_NAME, handleDraggedEntered);
         dz.addEventListener(DRAGGED_LEFT_EVENT_NAME, handleDraggedLeft);
         dz.addEventListener(DRAGGED_OVER_INDEX_EVENT_NAME, handleDraggedIsOverIndex);
     }
     window.addEventListener(DRAGGED_LEFT_DOCUMENT_EVENT_NAME, handleDrop);
+
     // it is important that we don't have an interval that is faster than the flip duration because it can cause elements to jump bach and forth
     const setIntervalMs = Math.max(...Array.from(dropZones.keys()).map(dz => dzToConfig.get(dz).dropAnimationDurationMs));
-    const observationIntervalMs = setIntervalMs === 0 ? DISABLED_OBSERVATION_INTERVAL_MS : Math.max(setIntervalMs, MIN_OBSERVATION_INTERVAL_MS); //if setintervalms is 0 it goes to 20, otherwise it is max between it and min observation.
-    observe(draggedEl, dropZones, observationIntervalMs * 1.07);
+    const observationIntervalMs = setIntervalMs === 0 ? DISABLED_OBSERVATION_INTERVAL_MS : Math.max(setIntervalMs, MIN_OBSERVATION_INTERVAL_MS); // if setIntervalMs is 0 it goes to 20, otherwise it is max between it and min observation.
+    const multiScroller = createMultiScroller(dropZones, () => currentMousePosition);
+    observe(draggedEl, dropZones, observationIntervalMs * 1.07, multiScroller);
 }
 function unWatchDraggedElement() {
     printDebug(() => "unwatching dragged element");
-    disarmWindowScroller();
     const dropZones = typeToDropZones.get(draggedElType);
     for (const dz of dropZones) {
         dz.removeEventListener(DRAGGED_ENTERED_EVENT_NAME, handleDraggedEntered);

package/src/helpers/windowScroller.js

@@ -1,48 +0,0 @@
-import {makeScroller} from "./scroller";
-import {printDebug} from "../constants";
-import {resetIndexesCache} from "./listUtil";
-
-const INTERVAL_MS = 300;
-let mousePosition;
-
-/**
- * Do not use this! it is visible for testing only until we get over the issue Cypress not triggering the mousemove listeners
- * // TODO - make private (remove export)
- * @param {{clientX: number, clientY: number}} e
- */
-export function updateMousePosition(e) {
-    const c = e.touches ? e.touches[0] : e;
-    mousePosition = {x: c.clientX, y: c.clientY};
-}
-const {scrollIfNeeded, resetScrolling} = makeScroller();
-let next;
-
-function loop() {
-    if (mousePosition) {
-        const scrolled = scrollIfNeeded(mousePosition, document.documentElement);
-        if (scrolled) resetIndexesCache();
-    }
-    next = window.setTimeout(loop, INTERVAL_MS);
-}
-
-/**
- * will start watching the mouse pointer and scroll the window if it goes next to the edges
- */
-export function armWindowScroller() {
-    printDebug(() => "arming window scroller");
-    window.addEventListener("mousemove", updateMousePosition);
-    window.addEventListener("touchmove", updateMousePosition);
-    loop();
-}
-
-/**
- * will stop watching the mouse pointer and won't scroll the window anymore
- */
-export function disarmWindowScroller() {
-    printDebug(() => "disarming window scroller");
-    window.removeEventListener("mousemove", updateMousePosition);
-    window.removeEventListener("touchmove", updateMousePosition);
-    mousePosition = undefined;
-    window.clearTimeout(next);
-    resetScrolling();
-}