Dropzone doesn't respect Autoscroll's scroll when the container option is set and the window doesn't scroll with the container

[BenKluwe]

If you have questions about the API that aren't answered in the docs or FAQ, try asking in the Gitter chatroom or on Stackoverflow.

If you've found something that looks like a bug, include a link to a minimal demo on JSFilddle, Codepen with instructions to reproduce the bug with and roughly follow the following issue description format:

Expected behavior

When using autoscroll in a draggable with a specified element, the dropzones should respect the elements rect when scrolled. This happened to me when I used two lists side-by-side inside a container. Dragging an element from one list to the other works but as soon as you scroll and backtrack a little bit the wrong element is selected as the active dropzone.

Actual behavior

When setting a container element for autoscroll the item's rect isn't calculated when scrolled. Instead, the window's scroll is used which doesn't work when the window hasn't scrolled but the element has. This behaviour happens when using pointer, center or a number as the dropzone's overlap option.

System configuration

interact.js version: 1.10.26
Browser name and version: Chromium
Operating System: Linux

Relevant lines of code

I have dug through the code and see this is where the droppactive state is detected:

interact.js/packages/@interactjs/actions/drop/plugin.ts

Line 575 in d3d4746

const dragRect = draggable.getRect(draggableElement)

following through below is where the scroll is calculated and applied and it seems it is using just the window's scroll, not the set autoscroll container element:

interact.js/packages/@interactjs/utils/domUtils.ts

Line 232 in d3d4746

const scroll = getScrollXY(win.getWindow(element))