Question

我正在使用Gatsby 2.2.10建立一个网站，并且Link组件保留了前一页的滚动位置，并且在单击它们时不会滚动回到顶部。

<div className="Footer__legal body">
 <p>© {new Date().getFullYear()} Fiftyone3</p>
 <Link to="/privacy-policy">Privacy Policy</Link>
 <Link to="/page-2">Page 2 Link component</Link>
</div>

预期行为：

当您单击“隐私策略”，“第2页”或网站底部的任何页面时，我希望该页面加载时用户会回到顶部。

实际行为：

用户停留在当前页面的滚动位置

可在此处查看：https://fiftyone3-beta.netlify.com/

此处的复制错误代码：https://github.com/eagleeyejack/gatsby-scroll-bug

Answer 1

如果您在overflow: hidden上设置了overflow: auto或body，则会遇到此问题！

Answer 2

如果页面是无状态功能组件，则可以使用useEffect钩子返回到页面顶部，前提是您使用的是graphql，因此您的组件将一些数据一个争论。这样，每次data更改时，您都滚动到页面顶部（工作方式类似于componentDidUpdate）。

const PageCmp = ({ data }) => {
    ...
    useEffect(() => {
        window.scrollTo(0,0)
    }, [data])
    ...
}

Answer 3

好的，这是一个古老的问题，但是我最近也面临着同样的奇怪行为。事实证明，我的问题不同于到目前为止在互联网上看到的所有其他解决方案。

Gatsby使用名为gatsby-react-router-scroll的软件包。该程序包管理Gatsby的滚动行为。此行为主要在Scroll Handler组件中实现。该组件仅以componentDidUpdate方法向上滚动，而不以componentDidMount方法向上滚动。我在debugger方法中添加了componentDidMount，并且在每次导航时都重新安装了ScrollHandler组件。

解决方法是弄清楚为什么在每次导航时都要安装和重新安装此组件。就我而言，我在React.StrictMode的{{1}}函数上有一个wrapRootElement组件。删除StrictMode使ScrollHandler组件稳定，从而解决了我的问题。

Answer 4

useEffect(() => window.scrollTo(0, 0), [])为我解决了这个问题。我只在Firefox上有问题，而在chrome上没有。知道是什么导致了问题，但现在可以正常使用。

Answer 5

在我的 CSS 中，我有

html, body {
  height: 100%;
  overflow-y: scroll;
}

因为这是修复仅限移动 safari 的错误的唯一方法（我的最爱！）

如果您也无法摆脱 overflow 属性，我建议这样做：

// in gatsby-browser.js
export function shouldUpdateScroll(prevRouterProps, { location }) {
  window.scrollTo(0, 0)
  const body = document.getElementsByTagName('body')[0]
  body.scrollTop = 0
  return false
}

Answer 6

通过将index.js页面转换为基于类的组件，然后添加

来找出解决方法

  componentDidUpdate() {
    window.scrollTo(0,0);
  }

不是最干净的修复程序，也不知道为什么它没有自动滚动，下周去JS开会，所以会问一个问题，然后在我得到答案后进行跟进。

当我开始一个新项目并且Gatsby-cli没有问题时，我感觉这与我的风格有关。将重构样式以查看是否可以解决问题。

Answer 7

您还可以修改gatsby-browser.js并为每个滚动更新实现一个钩子：

// in gastby-browser.js
exports.shouldUpdateScroll = ({
  routerProps: { location },
  getSavedScrollPosition,
}) => {
  const { pathname } = location
  // list of routes for the scroll-to-top-hook
  const scrollToTopRoutes = [`/privacy-policy`, `/page-2`]
  // if the new route is part of the list above, scroll to top (0, 0)
  if (scrollToTopRoutes.indexOf(pathname) !== -1) {
    window.scrollTo(0, 0)
  }

  return false
}

您可以在GatsbyJS网站上的shouldUpdateScroll on GitHub或documentation for shouldUpdateScroll中找到代码。

Answer 8

我的问题是我有spark = SparkSession.builder.master("local[*]").config("spark.jars.packages", "graphframes:graphframes:0.7.0-spark2.4-s_2.11").getOrCreate()。删除该规则似乎已经解决了问题。

我的项目中也有html {height: 100%}，为我的主要内容添加了更多包装器。

如何修复Gatsby JS Link组件，使其保留滚动位置并且不重置为顶部

8 个答案: