如何防止浏览器在渲染时滚动到顶部答案

【问题标题】：How do I prevent the browser from scrolling to the top on render如何防止浏览器在渲染时滚动到顶部
【发布时间】：2018-07-10 19:59:17
【问题描述】：

如何防止浏览器在渲染时滚动到顶部？这可以在https://www.gatsbyjs.org/ 或https://reactjs.org/ 上复制，方法是访问网络连接受限的网站并在页面呈现之前向下滚动。

禁用 JS 时不会发生这种情况。我相信这是 Gatsby 唯一的问题。

【问题讨论】：

也许这会有所帮助 history.scrollRestoration = "manual"
在我的情况下，我通过添加 gatsby-browser.js 和 exports.shouldUpdateScroll = () => false 解决了这个问题

【解决方案1】：

这最终成为了 Gatsby 中的一个错误，可以通过 https://github.com/gatsbyjs/gatsby/issues/6392#issuecomment-404444341 进行跟踪。

解决此问题的一种方法是在安装组件之前禁用滚动，然后重新启用它。这可以通过以下样式更改来完成：

// styles.css
body {
  overflow: hidden;
}

// Component.js
componentDidMount () {
  document.body.style.overflow = 'auto'
}

【讨论】：