search

malte-wessel / react-custom-scrollbars

React scrollbars component
http://malte-wessel.github.io/react-custom-scrollbars/
MIT License
3.2k stars 577 forks source link

Preserve Scroll Position through history from React Router #146

Open miswartz opened 7 years ago

miswartz commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

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 commented 5 years ago

@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 commented 5 years ago

@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 commented 5 years ago

What do you mean by flash?

On Thu, Apr 25, 2019, 06:14 Cam Tullos notifications@github.com 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 https://github.com/malte-wessel/react-custom-scrollbars/issues/146#issuecomment-486667600, or mute the thread https://github.com/notifications/unsubscribe-auth/AAY5L72VMRBBME65LWCECW3PSGVEHANCNFSM4DIH7DAA .

ChristopherHButler commented 5 years ago

@cdtinney do you have a working codepen?