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>
    );
  }
}

uhhh what? are you saying that when you scroll the mouse you want it to change the route? — Jayce444, Jan 11 '17 at 23:48
@FERNANDOORTIZ, have you accomplished this? It would be great if you provide a code snippet on how you achieved this. — Jefree Sujit, May 13 '18 at 15:02
Hey can you please elaborate or give a example what you have done to achieve this functionality? — Nirali, May 24 '18 at 15:51

score 1 · Accepted Answer · edited May 23 '17 at 12:07

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

score 1 · Answer 2 · answered May 24 '20 at 15:04

You can use (react-router-dom useHistory) to change the path after scroll to end.

import React from "react";
import ReactDOM from "react-dom";
import { HashRouter, useHistory } from "react-router-dom";

const Root = () => {
    const history = useHistory();

    function handleScroll(event) {
        var node = event.target;
        const down = node.scrollHeight - node.scrollTop === node.clientHeight;
        if (down) {
            history.push("/newPath");
        }
    }

    const paneDidMount = (node) => {
        if (node) {
            node.addEventListener("scroll", handleScroll);
        }
    };

    return (
        <div ref={paneDidMount} style={{ overflowY: "scroll", maxHeight: "300px" }}>
            <section className="section" style={{ height: `100vh` }}>
                <h1>1</h1>
            </section>
            <section className="section" style={{ height: `100vh` }}>
                <h1>2</h1>
            </section>
        </div>
    );
};

ReactDOM.render(
    <HashRouter>
        <div>
            <Root></Root>
        </div>
    </HashRouter>,
    document.getElementById("root")
);

change route in scroll reactjs

2 Answers2