在滚动 reactjs 中更改路线答案

【问题标题】：change route in scroll reactjs在滚动 reactjs 中更改路线
【发布时间】：2017-05-26 22:43:01
【问题描述】：

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

希望有人指导

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

【问题讨论】：

呃什么？你是说当你滚动鼠标时你想让它改变路线？
是的，这可能吗？
@FERNANDOORTIZ，你做到了吗？如果您提供有关如何实现此目的的代码 sn-p，那就太好了。
您好，您能否详细说明或举例说明您为实现此功能所做的工作？

标签： reactjs scroll react-router browser-history

【解决方案1】：

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

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

这是一个关于如何以编程方式更改 React Route 的链接：

Programmatically navigate using react router

所以当他们滚动时，检查它是向上还是向下，然后相应地推动下一条/上一条路线。我不知道是否有任何内置功能可以在某个路线之前/之后立即获取路线，因此您可能只需要在某处列出它们作为参考

【讨论】：

【解决方案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")
);

【讨论】：