Stop the navigation to element upon clicking link

[plffy]

I have explained the complete situation here - https://stackoverflow.com/questions/74753194/react-customise-react-scroll-behaviour.

Can we stop the navigation behaviour on click of Link/Button? I want to use onClick props to navigate to the desired element when clicked but at the same time the correct Link should get active when user scrolls using mouse.

[plffy]

Basically, can we give an option to make Link/Button non-clickable?

[fisshy]

Have you tried CSS for this?

a { pointer-events: none }could potentially fix it

[plffy]

This will block all the actions on Link element. I still need the navigation to work onClick. I did the below changes to solve this:

1. Copied the code for "Element" and "scroll-link" locally and comment out the below code in "scroll-link"

` /*

• do the magic! */ / handling the navigation through onClick event // this.scrollTo(this.props.to, this.props);`
  2. Then handing the navigation through onClick event.
  3. Active state transition is still happening the default setup of offset and to props

Keeping the navigation using default "to" props as optional solves the common problem of last Link element not getting active as the offset is now set differently for onClick and active state transition.

Please let me know if you see any issue with this approach

[plffy]

@fisshy Can we have this support added in the react-scroll? I am happy to raise a PR for this.

This will solve the use-case to set the state active some pixels before the element reaches top and at the same time bring the element to top when clicked.

This is the normal scroll behaviour we generally see in most of the websites.

[plffy]

Any update on this?

[fisshy]

Your always free to make a PR for this, but I will have to try it out and make sure it doesn't break current behaviour.