如何使用 React 中的 onScroll 事件使用 React-Router 移动到另一个页面答案

【问题标题】：How can I use an onScroll event in React to move to another page using React-Router如何使用 React 中的 onScroll 事件使用 React-Router 移动到另一个页面
【发布时间】：2019-11-07 05:57:34
【问题描述】：

我目前在 React 中有一个英雄图像组件，当用户尝试向下滚动页面时，我想移动到购物页面，就好像他们已连接，而实际上他们没有连接。这将使我的其他导航更容易，同时仍然保持所有组件和路线分开。

class Home extends Component {
  constructor(props) {
    super(props);

    this.handleScroll = this.handleScroll.bind(this);
  }

  handleScroll() {
    let history = useHistory();
    history.push('/categories');
    console.log('done');
  }

  render() {
    return (
      <Hero onScroll={this.handleScroll}>

我的 console.log 永远不会被执行。

【问题讨论】：

你不能使用嵌套路由在Hero组件下面添加categories，然后根据条件渲染categories组件。
所以有一个名为 hero 的组件，它是一个图像，当您滚动和向下滚动图像时，您需要显示不同的路线，即 categories 。这就是你想要实现的目标
是的， hero 是一个英雄图像，它占据了视口高度和宽度的 100%，因此默认没有滚动条。我尝试更改溢出 y 以在元素上滚动，但这不起作用，并留下了一个我不想要的滚动条。

标签： reactjs react-router onscroll

【解决方案1】：

让我们将 onScroll 改为 onWheel

<Hero onWheel={this.handleScroll}>

【讨论】：

我试过了，还是不行，还有其他建议吗？