alvarotrigo / react-fullpage

Official React.js wrapper for fullPage.js https://alvarotrigo.com/react-fullpage/
GNU General Public License v3.0
1.28k stars 179 forks source link

FullPage prevents Next.js to scroll to the top by default #381

Closed Eugene-Mokrushin closed 1 year ago

Eugene-Mokrushin commented 1 year ago

FullPage prevents Next.js to scroll to the top by default. I tested my code without FullPage - everything works fine. However with FullPage on - on route change FP sends it to a most close slide depending on where on the other page I was.

Sadly, could not reproduce it in sandbox due to poor support for next there.

Any workaround like force scroll on load or smth like that? Maybe I am blind, but could not find a method for that.

Browser - Chrome OS - Win 11 Node V - 16 Next V - 12

Thanks ahead!

alvarotrigo commented 1 year ago

FullPage prevents Next.js to scroll to the top by default

What do you mean? Scroll to the top how? Using a mouse? keyboard? Using anchors? Links?

Are you using the latest version of react-fullpage 0.1.31? Can you reproduce the issue outside Next or React?

Sadly, could not reproduce it in sandbox due to poor support for next there.

Without a reproduction it's gonna be difficult to figure what the problem is.

Eugene-Mokrushin commented 1 year ago

Scroll to the top how? Using a mouse? keyboard? Using anchors? Links?

Usually, when switching routes, next js pushes loading page to the top (moveTo(0, 0))

Are you using the latest version of react-fullpage 0.1.31?

0.1.28

Without a reproduction it's gonna be difficult to figure what the problem is.

Tried to reproduce it once again - sadly sandbox does not cooperate. The problem is - if you have more then 1 page with FP scrolling and you scroll in the first to say 4th slide, you switch to the other FP page and there you scroll to say 3d slide and you switch back to the first page - it does not start at the top, at the first slide, instead it continues where you left. Same with switching from the FP midway to a simple page, when switching routes back the FP it does not start at the first slide, it goes back where you left.

So the question is can I instantly and conditionally push FP back to the 0, 0 on leaving the page? Any methods for that?

alvarotrigo commented 1 year ago

0.1.28

Make sure to update to the latest. We don't provide support for old versions.

The problem is - if you have more then 1 page with FP scrolling and you scroll in the first to say 4th slide, you switch to the other FP page and there you scroll to say 3d slide and you switch back to the first page - it does not start at the top, at the first slide, instead it continues where you left.

By slide you mean vertical sections? Or horizontal slides?

alvarotrigo commented 1 year ago

Also, can you share the fullpage.js initialisation you are using right now?

Eugene-Mokrushin commented 1 year ago

By slide you mean vertical sections?

Yes, vertical. On change of the route it doesn't go straight to the first vertical slide. It goest to most closest to the scroll y position on the other page (or where I left scrolling the page when I came back to it).

Here's the initialisation:

<ReactFullpage
                licenseKey={'code'}
                scrollingSpeed={800}
                setAutoScrolling={false}
                scrollOverflow={false}
                render={() =>
                    <ReactFullpage.Wrapper>
                        <main className={classes.main}>
                            <section className='section'>
                                <ImageSection ref={sectionOne} visibility={sectionOneVidibility} lang={props.lang} />
                            </section>
                            <section className='section'>
                                <RecentProjectsSection lang={props.lang} projectCardsData={props.projects} />
                            </section>
                            <section className='section'>
                                <GridPhotosSection lang={props.lang} photosData={props.photos} />
                            </section>
                        </main>
                    </ReactFullpage.Wrapper>
                }
            />

Same init on the second page.

alvarotrigo commented 1 year ago

This seems to be a browser behavior, related to this other issue.

I don't think there's much we can do about it.