javascript - 仅当用户单击返回时，如何将滚动设置为顶部 false？

Question

每当路线更改时，我都会使用 Scroll 组件滚动到顶部：

Scroll.js

import { useEffect } from 'react';
import { withRouter } from 'react-router-dom';

function ScrollToTop({ history }) {
  useEffect(() => {
    const unlisten = history.listen(() => {
      window.scrollTo(0, 0);
    });
    return () => {
      unlisten();
    }
  }, []);

  return (null);
}

export default withRouter(ScrollToTop);

<Router>
  <Fragment>
    <ScrollToTop />
    <Switch>
        <Route path="/" exact component={Home} />
    </Switch>
  </Fragment>
</Router>

我想要实现的事情是，每当用户点击浏览器时，滚动到顶部不应该工作。

每当用户在浏览器中点击返回时，如何将滚动到顶部设置为 false？

标签： javascriptreactjsscrollreact-routerreact-router-dom

Answer 1

你不能检查你的历史动作，如果它是 POP，就忽略滚动吗？

就像是

function ScrollToTop({ history }) {
  
  useEffect(() => {
    const unlisten = history.listen(() => {
      if (history.action !== 'POP') {
          window.scrollTo(0, 0);
      }
    });
    return () => {
      unlisten();
    }
  }, []);

  return (null);
}