移动Android Chrome在"window.scrollTo“后的起伏起伏与”行为:平滑“
在我的React中，a有一个带有pageNav组件的产品列表。
我每页显示8个产品，所以当您单击NextPage按钮(位于列表底部)时，我需要将用户滚动回顶部，这样您就可以看到下一页的顶部。
这是因为我的ResultList组件基本上会同步地重新呈现(没有API调用)来呈现下一页的产品。如果我不把你滚动回顶部，你会看到下一页的底部，这是没有意义的。
当您单击NextPage按钮时，我就是这样做的：
window.scrollTo({
top: 0,
behavior: 'smooth'
});我这样做是因为我认为平滑的效果让用户100%地知道页面上发生了什么。
在第一次加载之后，Chrome正常运行，您可以上下滚动很好。但是，在您单击PrevPage或NextPage按钮以更改以查看其他产品后，您将看到自动平滑滚动正好回到页面的顶部，但从那时起，您将得到该页面的极不稳定和滞后的滚动。到处都是木桩。
Firefox似乎处理得很好。即使在多次更改页面之后，用户滚动也可以正常工作。
这只发生在移动Chrome上。火狐运行良好。狩猎旅行没有经过测试。
Samsung Galaxy A5 2017
Android 8.0.0
Chrome Mobile 79.0.3945.136我必须做的事：
我删除了滚动效果。
window.scrollTo({
top: 0
});现在它又能正常工作了，但是我失去了页面转换的平滑效果。
问题
有人经历过这个问题吗？
有解决办法吗，这样我才能保持平稳的效果？
回答 2
Stack Overflow用户
发布于 2020-01-27 00:21:13
我有完全相同的问题，但我也不知道如何解决它。让我们看看是否有人能为这个问题提供一些启发。Opera似乎也能处理流畅的滚动。
编辑。解决：
我解决了。而不是使用window.scrollTo，您可以使用以下方法：
element.scrollIntoView({
behavior: 'smooth'
});选择下一个页面列表中的第一个元素并使用element.scrollIntoView
PD:似乎是Chrome的一个bug。你可以用我上面告诉你的话，同时他们不能解决这个问题。
Stack Overflow用户
发布于 2020-10-07 22:37:34
延迟的scrollTo可能是由默认滚动事件引起的。ScrollTo做它的工作和滚动，但默认事件也可能是滚动。如果任何侦听器触发了scrollTo，请在其中添加“被动:假”，并防止函数中的默认设置。我的例子：
window.addEventListener("wheel", (e) => scrollToSection(e), {
passive: false,
});
const scrollToSection = (e) => {
e.preventDefault();
window.scrollTo({
top: value,
left: value,
behavior: "smooth",
});
};https://stackoverflow.com/questions/59897574
复制相似问题
腾讯云开发者
