From 0391e622adc8c379d68d6a133961c521d0a00003 Mon Sep 17 00:00:00 2001 From: Clauderic Demers Date: Tue, 19 Mar 2019 22:02:33 -0400 Subject: [PATCH] fix: issue with windowAsScrollContainer and translation offsets MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit With the recently introduced change to automatically find the scrolling parent of the SortableContainer (getScrollingParent function), there was an issue introduced where the scrollContainer would resolve to the document.body when using windowAsScrollContainer, and the container scroll offset would be taken into account twice. Normally, we take into account the window scroll position and the scroll container’s scroll position, but in this case they were both the same element. --- src/SortableContainer/index.js | 30 ++++++++++++++++++++++-------- 1 file changed, 22 insertions(+), 8 deletions(-) diff --git a/src/SortableContainer/index.js b/src/SortableContainer/index.js index a400ca175..295a9103d 100644 --- a/src/SortableContainer/index.js +++ b/src/SortableContainer/index.js @@ -502,20 +502,14 @@ export default function sortableContainer( animateNodes() { const {transitionDuration, hideSortableGhost, onSortOver} = this.props; + const {containerScrollDelta, windowScrollDelta} = this; const nodes = this.manager.getOrderedRefs(); - const containerScrollDelta = { - left: this.scrollContainer.scrollLeft - this.initialScroll.left, - top: this.scrollContainer.scrollTop - this.initialScroll.top, - }; const sortingOffset = { left: this.offsetEdge.left + this.translate.x + containerScrollDelta.left, top: this.offsetEdge.top + this.translate.y + containerScrollDelta.top, }; - const windowScrollDelta = { - left: window.pageXOffset - this.initialWindowScroll.left, - top: window.pageYOffset - this.initialWindowScroll.top, - }; + const prevIndex = this.newIndex; this.newIndex = null; @@ -745,5 +739,25 @@ export default function sortableContainer( return this.props.helperContainer || this.document.body; } + + get containerScrollDelta() { + const {useWindowAsScrollContainer} = this.props; + + if (useWindowAsScrollContainer) { + return {left: 0, top: 0}; + } + + return { + left: this.scrollContainer.scrollLeft - this.initialScroll.left, + top: this.scrollContainer.scrollTop - this.initialScroll.top, + }; + } + + get windowScrollDelta() { + return { + left: this.contentWindow.pageXOffset - this.initialWindowScroll.left, + top: this.contentWindow.pageYOffset - this.initialWindowScroll.top, + }; + } }; }