Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

zenscroll + nextjs issue #67

Closed
kbrabrand opened this issue Oct 26, 2017 · 3 comments
Closed

zenscroll + nextjs issue #67

kbrabrand opened this issue Oct 26, 2017 · 3 comments

Comments

@kbrabrand
Copy link
Contributor

kbrabrand commented Oct 26, 2017

This is not really a bug, but more of a heads up.

Backstory
I've been working on a site on top of nextjs. We've been struggling with a bug for a long while where the next/routercomplains that url is undefined. It happened when I navigated from one page to another, and then clicked back and then forward in the browser.

cue hours of digging...

Findings
After digging through large portions of next/router and our own code, I was able to isolate the issue to tocbot. I had a hunch that the problem was that the location and that next got confused.

In the end it turned out to be zenscroll setting the window.location that mess up the history data. So when going back and then forward again, next won't find enough information to figure out what page to show.

"Solution"
Disable smooth scrolling by setting smoothScroll in the tocbot initialization. In my app I've worked around it by disabling scrolling, adding an onclick handler where next router is used to replaceState.

I handle the animation to the element in my app, but the crux is to prevent manipulation of the window.location from places other than next/router.

@kbrabrand kbrabrand changed the title zenscroll + next-issue zenscroll + nextjs issue Oct 26, 2017
@tscanlin
Copy link
Owner

Hey, thanks for digging in and finding the root cause @kbrabrand, that's some really good debugging work and thank you for sharing. And I'm glad the PR you made helped you mitigate the issue.

It seems like zenscroll should offer an option to override the default onDone handler.. Because that would have helped here. Maybe I should just write my own smooth scrolling library and ditch zenscroll..

Either way, really appreciate your help looking into this! :)

@TomiTakussaari
Copy link

I also hit a problem with Zenscroll in our React app, as Zenscroll creates click handlers that break handling of links with fragments (#) in other pages of our React app.

There seems to be other event handlers in zenscroll too, which may also cause problems for SPA-style sites.

Disabling smooth scroll helps, but its not optimal

@tscanlin
Copy link
Owner

I have a fix for this here: #71

I'm gonna test other browsers and work on doc updates + options. Hopefully it fixes the issues you guys experienced.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants