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

Posted 2023-02-16

【中文标题】页面更改时的滚动恢复未完全滚动到顶部

【英文标题】：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; 

【参考方案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