search

fisshy / react-scroll

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

Active state not being properly set for some sections #551

Open JusticeMatthew opened 1 year ago

JusticeMatthew commented 1 year ago

Hello,

I've spent days and days trying to resolve this with no success.

For some reason when I use my react-scroll nav links to navigate up or down my page sometimes they highlight the active section link correctly and sometimes they don't 🤔

Here is a video demonstrating the issue: https://user-images.githubusercontent.com/72817096/233223869-77d5f4f0-76d9-4b6b-9666-8ab33d733a0b.mp4

I have tried so many different variations but I still can't seem to resolve the issue

Here is the code where I'm using it The react-scroll Link component is used inside src/components/interface/ScrollLink.tsx. The ScrollLink.tsx is used in src/components/Header.tsx and the components they link to are in src/containers

ScrollLink.tsx Header.tsx src/containers (containers has Landing.tsx, Projects.tsx, About.tsx, and Contact.tsx which make up the 4 page sections)

Any help at all would be greatly appreciated! Love this package!

Thanks! 👍

JusticeMatthew commented 1 year ago

Anyone have any luck finding a solution? Nothing I've tried has worked :(

fisshy commented 1 year ago

By any chance you're re-rendering or animating the containers when you reach them?

JusticeMatthew commented 1 year ago

I had planned to have them animate in but currently, there are none.

And for rerenders according to the dev tools, the only thing re-rendering is the actual nav links when they change active state

thomaspessato commented 2 months ago

@JusticeMatthew did you get this to work?