在滚动反应中更改路线

Question

我有一个问题，但我什至不知道如何解决，我正在寻找如果我向下滚动，显示以下路线并向上滚动显示以前的路线

希望得到指导

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

有一个 onScroll 事件可以用作触发器，这里是 post 如何确定它们是向上滚动还是向下滚动：

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

下面是关于如何以编程方式更改 React 路由的 link：

所以当他们滚动时，检查它是向上还是向下，然后相应地推送 next/previous 路由。我不知道是否有任何内置的东西可以立即获取路线before/after某条路线，所以你可能只需要在某处列出它们作为参考

Answer 2

滚动结束后可以使用(react-router-dom useHistory)更改路径

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

scroll

browser-history

reactjs

react-router