当 Chrome 加载数据时，它会重置滚动

在开发 Web 应用程序时，我们经常需要向用户提供翻页的功能。为此，我们需要知道何时滚动到网页底部，以便请求下一页数据。但是，如果使用的是 Chrome 浏览器，你就需要注意，当该浏览器加载新数据时，它会重置页面滚动位置。这或许会给那些需要使用滚动位置进行无限滚动等操作的开发人员带来一些麻烦。

为什么在 Chrome 中加载数据会重置滚动？

这种行为是因为 Chrome 使用了一种名为“back-forward cache”的技术。它会保存最近访问过的历史页面，这样当用户在浏览器的“后退”和“前进”按钮间导航时，浏览器可以直接从 cache 中读取页面，而无需从服务器重新下载。这种优化可以大大提高页面加载速度，提升用户体验。

但是，当使用“back-forward cache”时，Chrome 会重置滚动位置以确保用户可以观看到页面的开头部分，而不是上次访问该页面时停止滚动的位置。这样可以确保用户看到页面的同一个部分，无论他是通过“前进”还是“后退”按钮导航到该页面。

如何解决这个问题？

翻转滚动到底部的解决方案之一是使用 Intersection Observer API，它可以帮助我们在页面上设置一个观测点，并在观测点进入视图时触发回调函数。使用这种 API，我们可以在滚动到底部时请求新数据，而不必担心 Chrome 会重置滚动位置。以下是一个简单的 Intersection Observer 的例子：

let observer = new IntersectionObserver((entries, observer) => {
  if (entries[0].isIntersecting) {
    // 滚动到底部
    // 请求新数据
  }
}, { threshold: 1 });

observer.observe(document.querySelector('#loadMore'));

在上面的代码中，我们创建了一个 IntersectionObserver 对象并观察了一个 ID 为“loadMore”的元素。当该元素进入视图（也就是滚动到底部时），回调函数将被调用，并执行从服务器请求新数据的操作。

结论

虽然 Chrome 在加载新数据时重置滚动位置可能会让一些 Web 开发人员感到困惑，但理解背后的原因以及使用 Intersection Observer API 这样的解决方案可以帮助我们顺利完成任务并提供更好的用户体验。