react-sortable-hoc icon indicating copy to clipboard operation
react-sortable-hoc copied to clipboard

Cannot auto scroll in mobile devices, when useWindowAsScrollContainer is true

Open lyz810 opened this issue 5 years ago • 0 comments

document.scrollingElement is BODY in mobile devices, and HTML in PC. When set useWindowAsScrollContainer to be true, AutoScroller will use document.scrollingElement(here is BODY element), the code can be found in https://github.com/clauderic/react-sortable-hoc/blob/master/src/SortableContainer/index.js#L93

However, in this case, document.body.clientHeight is always equal with document.body.scrollHeight.So, isBottom here will always be true, and cannot auto scroll. https://github.com/clauderic/react-sortable-hoc/blob/master/src/AutoScroller/index.js#L40

I tried to replace const isBottom = scrollHeight - scrollTop - clientHeight === 0; with const isBottom = scrollHeight - scrollTop - (this.container === document.scrollingElement ? window.innerHeight : clientHeight) === 0;, and it works.

this.container === document.scrollingElement will be true, when we set useWindowAsScrollContainer to be true

<SortableList
   lockAxis="y"
   shouldCancelStart={() => false}
    pressDelay={100}
    helperContainer={() => this.formRef.current}
    useWindowAsScrollContainer
     lockToContainerEdges
 />

lyz810 avatar Nov 26 '20 13:11 lyz810