Unwanted scroll to top while scrolling (on infinite scroll page)

[edwardsilhol]

I've implemented the lib, and when I scroll (without dragging) the page automatically scrolls back to top. It looks like it's related to my infinite scroll (Packery with an async collection), as it seems to happen on the render where the new elements are added. Maybe something the lib does on componentDidMount or componentDidUpdate...

Has anyone run into a similar issue ?

[nickclaw]

Interesting, any way you can make a simple repro case using create-react-app or something similar?

[edwardsilhol]

Hey! Thanks for your answer!!

It's quite a complex implementation, which I didn't write myself, so it will take quite some time to repro. I'd rather avoid it.

New info: the scroll to top happens whenever there's a render and the div has been scrolled. It has nothing to do with new elements being added in the view. I'm going to keep investigating a little to see if I can find the call that triggers it.

I'm also going to test an alternate solution using DragLayer (which I need to implement for dragging multiple elements anyway) using this as a starting point

If all this doesn't work I'll make a repro case.

Either way, I'll update here.

[edwardsilhol]

Hi,

Just updating as promised. I ended up implementing DragLayer, and tracking the movements of the DragLayer to scroll the div.

Works perfectly.

Implementation of Draglayer is standard. Scroll watcher on the container div looks like this :

componentDidUpdate() { $(ReactDOM.findDOMNode(this)).animate({scrollTop: this.props.dragLayerOffset}); }

Where dragLayer offset is taken from DragLayer and stored in a Redux store.