[Question] save scroll position between navigations

[AbrahamAlcaina]

Hi, I used the fluxible-generator and it have the HandleHistory

export default handleHistory(provideContext(connectToStores(
    Application,
    [ApplicationStore, WallStore],
    function (stores, props) {
        const appStore = stores.ApplicationStore;
        const wallStore = stores.WallStore;
        return {
            currentPageName: appStore.getCurrentPageName(),
            pageTitle: appStore.getPageTitle(),
            pages: appStore.getPages(),
            wall: wallStore.getWall()
        };
    }
)));

I read the documentation and it restore automatically the scroll position. It's working fine if I use the refresh button in the browser, but if I navigated to another page and comeback it do not restore the scroll position.

I used the option preserveScrollPosition

 <NavLink routeName={link.page} preserveScrollPosition={true}>{link.title}</NavLink>

I miss something?

here you can test Sorry if it is a noov question.

[mridgway]

Can you try changing the order of the HoCs to provideContext(handleHistory(connectToStores(...)))? I wonder if handleHistory is not able to access the context correctly.

[AbrahamAlcaina]

@mridgway I changed it and still fail. Could be related with add action to the configuration? This is my code:

import {getNews} from '../actions/newsActions';
export default {
    home: {
        path: '/',
        method: 'get',
        page: 'home',
        title: 'Home',
        handler: require('../components/Home'),
        action: getNews
    },
    about: {
        path: '/about',
        method: 'get',
        page: 'about',
        title: 'About',
        handler: require('../components/About')
    }
};

PS today I uploaded all the app to github

[AbrahamAlcaina]

One of my components it is listening 'scroll' & 'resize'.

window.addEventListener('scroll', this.scrollListener);
window.addEventListener('resize', this.scrollListener);

To do an infinite scroll (aka load more items)

[tbo]

I think I can confirm this. I originally wrote the preserveScrollPosition feature for flux-router-component. Both versions seem to differ in one very basic aspect. flux-router-component changes the current route after the route action has been executed, fluxible-router changes it directly on NAVIGATE_START.

In case of routes with async actions, the scroll position is being restored before the current route handler has anything to display.

@mridgway Can you confirm this?

[mridgway]

Confirmed, we moved pushState to the beginning of navigation. We've had some debates internally whether the scrollTo should be moved to NAVIGATE_SUCCESS and I think we're leaning towards doing just this. I think this would help with the issue at hand as well.

[tbo]

@mridgway Have you made a decision on how to proceed?

[mridgway]

I believe @dnewcome has been diving into page transition behavior and may have some insight into the how to handle scrolling during navigation.

[malaman]

@dnewcome @mridgway Do you have you any updates regarding the issue?

[Vijar]

I believe #87 will fix this.

[mridgway]

We're going to recommend that you manage the scroll positions on your own and we will provide access to the saved scroll position for pop state.

We have found that there's no silver bullet solution for scrolling. It needs to be synchronized with the flow of your application rather than before or after NAVIGATE_START.

We are not going to remove the current functionality, but we will suggest that if you need better handling, then you should disable scrolling with enableScroll: false and then manage it yourself.

[malaman]

@mridgway thank you for answer. Could you please describe in more details how to receive access to the saved scroll positions. Thxs in advance.

[mridgway]

Scroll position is available on window.history.state.scroll.