I am using React Spring Parallax to build sticky scrolling sections, see my demo here: https://codesandbox.io/s/parallax-sticky-scroll-2zd58
Currently, this demo is functioning how I need it to except for the scrollTo() being triggered by clicking the button. I want to trigger the scrollTo function when a user scrolls up or down, however, I can not figure out how to implement onScroll in react functional components.
I've looked at the following questions here but they did not satisfy my issue: onScroll in React functional component onScroll React cannot trigger
all you need is change scrolling to be true. I think that's all you need
like this:
<Parallax scrolling={true} pages={3} ref={(ref) => (parallax = ref)}>
{/* Franchise Sections */}
<FranchiseSection offset="0" bg="red" />
<FranchiseSection offset="1" scrollTo="2" bg="blue" />
<FranchiseSection offset="2" scrollTo="3" bg="green" />
<FranchiseContent offset="0" scrollTo="1" />
<FranchiseContent offset="1" scrollTo="2" />
<FranchiseContent offset="2" scrollTo="0" />
</Parallax>
this your code before
<Parallax scrolling={false} pages={3} ref={(ref) => (parallax = ref)}>
....
as to be discussed may be this is what you want to achieve.
There's no onScroll props in ParallaxLayer based Documentation here React-Spring . So i think you need to make a function to listen scroll activity in the browser like this sample. hope it can help you.
...
const FranchiseSection = (props) => {
const handleScrollTo = () => {
console.log("scrolled");
};
React.useEffect(() => {
if (props.offset) {
window.addEventListener("scroll", handleScrollTo);
}
return function cleanup() {
if (props.offset) {
window.removeEventListener("scroll", handleScrollTo);
}
};
});
return (
<div className="franchise-section">
<ParallaxLayer
offset={props.offset}
speed={0}
style={{ backgroundColor: `${props.bg}` }}
>
{props.children}
</ParallaxLayer>
</div>
);
};
...
This is the sandbox for sample
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.