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

Question

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

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

Answer 1

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

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

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

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

How do I prevent the browser from scrolling to the top on render