Preserve Scroll Position through history from React Router

[miswartz]

The default scroll bars preserve scroll position when going back and forward through history with react router historys goBack calls.

For example if I'm on a list of all products page, and I scroll half way down, and I click in to a product page, and then hit back, the previous scroll position is preserved and used. I go back to the product list half way down.

This does not happen with this these custom scrollbars and I would like it to. Any ideas?

[cdtinney]

There's a closed issue for this over at react-router-scroll - Using react-router-scroll with react-custom-scrollbars #42

One solution (from what I understand) would be modifications to scroll-behavior to support providing custom scrolling behavior via props, overriding the default scrollLeft and scrollTop with those of react-custom-scrollbars.

[cdtinney]

For reference, I've implemented this via the API and Redux.

First, add a ref attribute to the Scrollbars component and a callback for onScrollStop. When the onScrollStop handler is called, use this._scrollbarsRef.getScrollTop() to get the Y co-ordinate. A Redux action is dispatched that stores the scroll top for that view.

When the component is mounted again, the value from the store is used to call scrollTop() to set the scroll position.

[diegogurgel]

@cdtinney I'm trying to do that but the scrollTop() keep calling onScrollStop again causing infinite renders. @malte-wessel Is it possible to add something like scrollTop(100 , cancelEvent)?

[camdagr8]

@cdtinney I have the same setup but see a flash from the scrollTop 0 to the saved position. How did you deal with that?

[cdtinney]

What do you mean by flash?

…

On Thu, Apr 25, 2019, 06:14 Cam Tullos ***@***.***> wrote: @cdtinney <https://github.com/cdtinney> I have the same setup but see a flash from the scrollTop 0 to the saved position. How did you deal with that? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#146 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAY5L72VMRBBME65LWCECW3PSGVEHANCNFSM4DIH7DAA> .

[ChristopherHButler]

@cdtinney do you have a working codepen?