change route in scroll reactjs

Question

I have a question, but I do not even know how to solve it, I'm looking for if I scroll down, show me the following routes and scroll up to show me the previous routes

I hope some guide

class Routes extends Component {
  render() {
    return (
      <Router history={browserHistory}>
        <Route path='/' component={HomeLayout}>
          <IndexRoute component={HomeComponent} />
        </Route>
        <Route path='aps' component={AppServiceLayout}>
          <IndexRoute  />
        </Route>
        <Route path='portfolio' component={portfolioLayout}>
          <IndexRoute  />
        </Route>
        <Route path='about_us' component={aboutUsLayout}>
          <IndexRoute  />
        </Route>        
        <Route path='*' component={HomeLayout}>
          <IndexRoute component={NotFoundComponent} />
        </Route>
      </Router>
    );
  }
}

Answer 1

There's an onScroll event that you can use as a trigger, here's a post on how to determine whether they scrolled up or down:

How can I determine the direction of a jQuery scroll event?

And here's a link on how to programatically change the React Route:

Programmatically navigate using react router

So when they scroll, check whether it's up or down, then push the next/previous route accordingly. I dunno if there's anything built in to just get the route immediately before/after a certain route, so you may just need a list of them somewhere as reference