Method to cancel scroll animation

[TotallWAR]

I have case that page should be scrolled conditionally. I try clickEvent.preventDefault(); clickEvent.stopPropagation(); but it's animated in any case.

[bySabi]

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)

[TotallWAR]

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}

`

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

[bySabi]

@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>
}

[TotallWAR]

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

[bySabi]

@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