Closed TotallWAR closed 6 years ago
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)
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?
@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>
}
Yes, you are right, this approach much better! Thank you for help =)
@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
I have case that page should be scrolled conditionally. I try
clickEvent.preventDefault(); clickEvent.stopPropagation();
but it's animated in any case.