During my research, I came across something related to scrollers called pageOnChange props:
I found examples of implementation using React Class Components, so I assumed your component is a class type.
First, I initialized a state object like this:
this.state = {
currentPage: 1,
isFooterVisible: false
};
Then, I created a function to update the state on a page change event:
pageOnChange = (number) => {
this.setState({
currentPage: number,
isFooterVisible: number === 6 // 6 represents the last component number
});
};
I added this function to the pageOnChange={this.pageOnChange} of ReactPageScroller:
<ReactPageScroller
ref={(c) => (this._pageScroller = c)}
pageOnChange={this.pageOnChange}
>
To render the footer component, I used conditional rendering with this.state.isFooterVisible like this:
<>
<ReactPageScroller
ref={(c) => (this._pageScroller = c)}
pageOnChange={this.pageOnChange}
>
<Comp title={"PAGE 1"} />
<Comp title={"PAGE 2"} />
<Comp title={"PAGE 3"} />
<Comp title={"PAGE 4"} />
<Comp title={"PAGE 5"} />
<Comp title={"PAGE 6"} />
</ReactPageScroller>
{this.state.isFooterVisible && <Footer />}
</>
I also added the following rules to the global CSS file:
html {
overflow: hidden;
width: 100%;
}
body {
height: 100%;
position: fixed;
/* prevent overscroll bounce*/
background-color: lightgreen;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
Below is the complete code for the component:
import React from "react";
import ReactPageScroller from "react-page-scroller";
import Comp from "./component";
import Footer from "./footer";
export default class Scroller extends React.Component {
constructor(props) {
super(props);
this.state = {
currentPage: 1,
isFooterVisible: false
};
this._pageScroller = null;
}
goToPage = (eventKey) => {
this._pageScroller.goToPage(eventKey);
};
pageOnChange = (number) => {
this.setState({
currentPage: number,
isFooterVisible: number === 6
});
};
render() {
return (
<>
<ReactPageScroller
ref={(c) => (this._pageScroller = c)}
pageOnChange={this.pageOnChange}
>
<Comp title={"PAGE 1"} />
<Comp title={"PAGE 2"} />
<Comp title={"PAGE 3"} />
<Comp title={"PAGE 4"} />
<Comp title={"PAGE 5"} />
<Comp title={"PAGE 6"} />
</ReactPageScroller>
{this.state.isFooterVisible && <Footer />}
</>
);
}
}
https://codesandbox.io/s/elegant-shape-j0u4c?fontsize=14&hidenavigation=1&theme=dark