React-router v6 window.scrollTo 不起作用

Posted 2023-02-21

【中文标题】React-router v6 window.scrollTo 不起作用

【英文标题】：React-router v6 window.scrollTo does not work

【发布时间】：2021-04-06 14:17:31

【问题描述】：

我正在尝试修复 React 中的滚动问题，当我向下滚动到页面上的某个点，然后导航到另一个页面时，该页面将从与上一页相同的滚动点开始。

这是我尝试过的：

import  useLocation  from 'react-router'

const ScrollToTop: React.FC = () => 
  const  pathname  = useLocation()
  React.useEffect(() => 
    console.log('im scrolling')
    window.scrollTo(0, 0)
  , [pathname])

  return null


export default ScrollToTop

然后像这样导入它：

import React from 'react'
import ReactDOM from 'react-dom'

import  BrowserRouter  from 'react-router-dom'

import ScrollToTop from './components/base/ScrollToTop'
import Apps from './App'

ReactDOM.render(
  <BrowserRouter>
    <ScrollToTop />
    <Apps />
  </BrowserRouter>,
  document.getElementById('root'),
)

我正在滚动 正在控制台中打印，但 window.scrollTo 不起作用。 我也尝试了 useLayoutEffect，但同样的结果仍然无法滚动。

【问题讨论】：

如果您直接在开发工具中调用window.scrollTo 是否有效？这可能与 html/CSS 标记以及哪些元素可滚动有关。

我尝试在控制台中粘贴但也不起作用，它返回undefined，尝试使用document.getElementById("root").scrollTo(0, 0) 仍然返回undefined

我明白了，我认为 window.scrollTo(0,0) 返回 undefined 是预期的行为。如果函数scrollTo 本身是未定义的，那就更成问题了。如果您使用 Firefox 并打开开发工具，您应该能够看到哪些 HTML 元素被标记为scroll。然后看看是否抓住 element.scrollTo(0,0) 有效。

感谢@AsherLim，通过定位特定的父容器来修复它。这是我实现页面布局的方式，滚动内容在子容器中。 ????????????????????????

【参考方案1】：

尝试抓取document.documentElement 或其他特定元素，而不是window。

const location = useLocation();
useLayoutEffect(() => 
  document.documentElement.scrollTo(0, 0);
, [location.pathname]);

相关：react-router scroll to top on every transition