页面更改时的滚动恢复未完全滚动到顶部答案

【问题标题】：Scroll Restoration on page change doesn't fully scroll to top页面更改时的滚动恢复未完全滚动到顶部
【发布时间】：2022-01-21 14:14:27
【问题描述】：

滚动恢复会向上滚动页面的 8/10，但不是一直滚动。不确定我的 ScrollToTop 组件是否有缺陷，或者我是否在 App 组件中错误地使用了路由和切换标签。下面分别是 ScrollToTop 和 App 组件。

import { useEffect } from "react";
import { useLocation } from "react-router-dom";

function ScrollToTop() {
  const { pathname } = useLocation();

  useEffect(() => {
    window.scrollTo(0, 0);
  }, [pathname]);

  return null;
}

export default ScrollToTop;

return (
    <div className="App">
      <Switch>
        <Route path='/explore'>
          <ScrollToTop />
          <Layout className='' currentUser={currentUser} posts={posts} handleLogout={handleLogout}>
            <Explore posts={posts} />
          </Layout >
        </Route>
        <Route path='/meta'>
          <ScrollToTop />
          <Layout currentUser={currentUser} posts={posts} handleLogout={handleLogout}>
            <Meta currentUser={currentUser} posts={posts} />
          </Layout>
        </Route>
        <Route path='/mana'>
          <ScrollToTop>
            <Layout currentUser={currentUser} posts={posts} handleLogout={handleLogout}>
              <Mana currentUser={currentUser} posts={posts} />
            </Layout>
          </ScrollToTop>
        </Route>
        <Route path='/crypto'>
          <ScrollToTop />
          <Layout currentUser={currentUser} posts={posts} handleLogout={handleLogout}>
            <Crypto currentUser={currentUser} posts={posts} />
          </Layout>
        </Route>
        <Route path='/film'>
          <ScrollToTop />
          <Layout currentUser={currentUser} posts={posts} handleLogout={handleLogout}>
            <Film currentUser={currentUser} posts={posts} />
          </Layout>
        </Route> 
      </Switch>
    </div >
  );
}

export default App;

【问题讨论】：

标签： reactjs react-native react-router-v4 scrolltop

【解决方案1】：

如果你想使用窗口对象进行滚动：

window.scroll({top:0,behavior:'smooth'})

【讨论】：

在scrolltotop组件还是app组件中？

【解决方案2】：

试试这个：

document.querySelector('body').scrollIntoView({ 
  block: "start"
})

【讨论】：

感谢您这么快的回复。我应该在哪里插入这段代码？
应该放在useEffect()中useEffect(() => { document.querySelector('body').scrollIntoView({ block: "start" }) }, [pathname]);替换window.scrollTo(0, 0);
哦，好吧，试过了，但没用。这可能与我如何在应用程序组件中的布局标记上方放置标记有关吗？
我认为路由器工作不正常。正确的配置应该是这样的：import { Switch, Route, useLocation, } from "react-router-dom"; function App(){ const location = useLocation(); return( <div className="App"> <Route render={({ location }) => ( <Switch> <Route path="/explore" exact component={Explore} /> </Switch> )} /> </div> ) } export default App
所以我的问题的解决方法是我必须从我的 app.css 文件中删除 overflow-x:hidden