search

fisshy / react-scroll

React scroll component
https://github.com/fisshy/react-scroll/blob/master/README.md
MIT License
4.36k stars 437 forks source link

Elements are scrolled to on Link click, but sometimes require a second click to make the section active. #422

Open drmeloy opened 4 years ago

drmeloy commented 4 years ago

If a Link in a nav bar is clicked, the page will scroll to the section, but the section will not become active until the Link is clicked a second time. This only happens on some sections at certain page widths. Using offset does not fix the issue.

drmeloy commented 4 years ago

The width of the page is a contributing factor to this bug, but I haven't been able to figure out specific points where the links are broken or why the page widths are impacting scrolling all the way to make a section active. Sometimes the section will never become active by clicking the link, only by beginning to manually scroll.

drmeloy commented 4 years ago

I'm wondering if this has to do with interactions between paddings, margins, and Link offset. My page is several 100vh sections, so I would expect scroll to go all the way, but offset has been necessary (which in and of itself seems like a bug), and since margins etc change at break points maybe this is impacting offset's ability to do its job?

mvandoff commented 4 years ago

Did you find a solution to this? I'm running into the same problem.

hyzor commented 4 years ago

I solved this by letting react-waypoint do the "set active" handling instead. So I removed spy and onSetActive from my <Link> elements and wrapped each targeted element with <Waypoint>. That way you get more control of when the target element is activated, and you can offset the triggers freely with using waypoints, while still keeping any scroll offset set in the <Link> element.