Method to cancel scroll animation about react-scrollchor HOT 5 CLOSED

Don´t know for sure if i understand your problem but you can conditionally scroll, handling click event your self and scroll using simulateClick API(https://github.com/bySabi/react-scrollchor#simulate-click-api)

from react-scrollchor.

You mean simulate click onClick event?
I have next case: i have button, i should scroll to element for mobile devices and not scroll for desktop.
And i tried next:
handleClickRegButton(clickEvent) { if (!isMobile) { this.props.dispatchShowRegisterLayer(); clickEvent.preventDefault(); clickEvent.stopPropagation(); clickEvent.nativeEvent.stopImmediatePropagation(); clickEvent.nativeEvent.preventDefault(); clickEvent.nativeEvent.stopPropagation(); } }

...

<Scrollchor to="#registration-section" animate={{ duration: 300 }} beforeAnimate={this.handleClickRegButton} > <MyButton /> </Scrollchor>

You suggest to use simulateClick for this click event which activated on button click?

from react-scrollchor.

@TotallWAR I would do otherwise, handleClickRegButton looks too much from the jQuery era. Why not use a better declarative approach, for Ex?

const RegButton = ({ isMobile }) => { 
     return isMobile
         ?  <a href="#registration-section"><MyButton /></a>
         : <Scrollchor to="#registration-section" animate={{ duration: 300 }}> <MyButton /> </Scrollchor>
}

from react-scrollchor.

Yes, you are right, this approach much better! Thank you for help =)

from react-scrollchor.

@TotallWAR You can disable scroll animation passing "a 0 returning easing function", for Ex:

const RegButton = ({ isMobile }) => {
     const animate = isMobile ? {duration: 0, easing: () => 0 } : {duration: 300}
     return  <Scrollchor to="#registration-section" animate={animate}> <MyButton /> </Scrollchor>
}

I hope I've help you

from react-scrollchor.