移动Android Chrome在"window.scrollTo“后的起伏起伏与”行为:平滑“
移动Android Chrome在"window.scrollTo“后的起伏起伏与”行为:平滑“
提问于 2020-01-24 13:38:33
在我的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
});现在它又能正常工作了，但是我失去了页面转换的平滑效果。
问题
有人经历过这个问题吗？
有解决办法吗，这样我才能保持平稳的效果？
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",
});
};页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59897574
复制相关文章
相似问题
腾讯云开发者
