search

rafgraph / react-router-hash-link

Hash link scroll functionality for React Router
https://react-router-hash-link.rafgraph.dev
MIT License
732 stars 62 forks source link

Doesn't scroll to expected location when coming from a different page. #84

Closed DanieleSassoli closed 3 years ago

DanieleSassoli commented 3 years ago

When I'm coming from a different route the page doesn't scroll to the expected position but rather the section before it, if I click on a link to a section close to the top the offset isn't too bad, but if I request an offset towards the bottom of the page then it gets worse and worse. I've seen a few stack overflow posts around this here and here, but no answers. Has anybody experienced this?

rafgraph commented 3 years ago

Hi, I have not experienced this issue. Do you experience it with the demo app when navigating to section two or three from the home page?

Can you create a minimal reproduction in CodeSandbox? If it's helpful you can fork the demo app in CodeSandbox as a starting point: https://codesandbox.io/s/github/rafgraph/react-router-hash-link/tree/main/demo, thanks.

rafgraph commented 3 years ago

One thought is you might be loading asynchronous content of unknown height on the new route. The scroll could be happening on the new route based on the page height without the new content, and then loading the content causes the offset. In this case, don't add the id to the page that you want to scroll to until the content is loaded as the scroll happens as soon as the id is found.

DanieleSassoli commented 3 years ago

Hi, thanks for the quick response and sorry for the slow reply. That might well be the case, there's a few carousels in the page that load in an async fashion. I'm very new to react, have you got any suggestion on what would be the best way to add these id after the page is loaded?

rafgraph commented 3 years ago

If the content that you want to scroll to is unrelated to the carousels, my suggestion would be to layout the page so the height of the carousels is known before the content loads, and then don't worry about waiting to add the id. If the content that you want to scroll to is the async carousel/content, then render a loading spinner/component (which doesn't have the same id) until it's loaded.

Note that if the page has multiple independent async carousels/content loads, you'll be better off using first approach regardless of what you want to scroll to.

blackpintz commented 2 years ago

If the content that you want to scroll to is unrelated to the carousels, my suggestion would be to layout the page so the height of the carousels is known before the content loads, and then don't worry about waiting to add the id. If the content that you want to scroll to is the async carousel/content, then render a loading spinner/component (which doesn't have the same id) until it's loaded.

Note that if the page has multiple independent async carousels/content loads, you'll be better off using first approach regardless of what you want to scroll to.

Is there a reference/illustration that you can provide for this? I am stuck here as well. The offset doesn't work for me so I need to try to load the component, that is disrupting the scroll before I can add the id.

shf60 commented 1 year ago

sometimes the problem happens when the height is auto, you may need to use aspect-ratio instead of height.