javascript - 移动 Android Chrome 在 "window.scrollTo"和 "behavior: smooth"之后起伏不定的滞后滚动

Question

在我的 React 应用程序中有一个带有 pageNav 组件的产品列表。

我每页显示 8 个产品，所以当您单击 NextPage 按钮(位于列表底部)时，我需要将用户滚动回顶部，这样您请参阅下一页的顶部。

这是因为我的 ResultList 组件基本上会同步重新呈现(无 API 调用)以呈现下一页的产品。如果我不将您滚动回顶部，您将看到下一页的底部，这毫无意义。

我的做法是，当您单击 NextPage 按钮时:

window.scrollTo({
  top: 0,
  behavior: 'smooth'
});

我这样做是因为我认为流畅的效果让用户 100% 了解页面上发生的事情。

首次加载后，Chrome 运行正常，您可以很好地上下滚动。但是当您点击 PrevPage 或 NextPage 按钮更改为查看其他产品后，您会看到自动平滑滚动发生以返回页面顶部，但是从那时起，您的页面将变得非常不稳定和滞后。它上下到处都会卡住。

Firefox 似乎可以很好地处理平滑滚动。即使在多次更改页面后，用户滚动也能正常工作。

这只发生在 Mobile Chrome 上。 Firefox 工作正常。 Safari 未经测试。

Samsung Galaxy A5 2017
Android 8.0.0
Chrome Mobile 79.0.3945.136

我必须做的:

我删除了滚动效果。

window.scrollTo({
  top: 0
});

现在它又可以正常工作了，但是我失去了页面转换的平滑效果。

问题

有人遇到过这个问题吗？

是否有解决方法，让我可以保持流畅的效果？

Answer 1

我有完全相同的问题，但我也不知道如何解决它。让我们看看是否有人可以解决这个问题。 Opera Mobile 似乎也可以很好地处理平滑滚动。

编辑。已解决:

我解决了。除了使用 window.scrollTo 你可以使用这个:

element.scrollIntoView({ 
   behavior: 'smooth' 
});

选择下一页列表的第一个元素并使用 element.scrollIntoView

PD: window.scrollTo 似乎是 Chrome Mobile 的错误。您可以使用我上面告诉您的内容，同时他们无法解决问题。