ReactJS中element.scrollTop滚动跳转Bug求助

1. window.pageYOffset 始终为0的原因 #

如果你的页面实际滚动容器是 .App 元素（比如给它设置了 overflow: auto/scroll，同时 html 和 body 没有滚动条），那么 window.pageYOffset 自然会一直是0——因为整个窗口并没有发生滚动，滚动行为只发生在 .App 这个内部容器上。

2. 滚动到阈值后视图跳回的原因 #

出现这种滚动跳回的问题，通常是以下几种情况导致：

• 元素显隐触发容器高度变化：当滚动到阈值显示/隐藏元素时，该元素的高度（或margin、padding等）直接改变了 .App 容器的总高度。比如原本隐藏的元素有固定高度，显示后容器高度突然增加，浏览器会自动调整滚动位置来适配新的高度，看起来就像滚动位置被“拉回”了。
• 滚动监听函数误修改scrollTop：检查你的滚动逻辑代码，是否不小心给 .App 的 scrollTop 赋值了固定值（比如误写了类似 document.querySelector('.App').scrollTop = heightToShow 的代码），导致每次滚动到阈值就强制重置滚动位置。
• 元素显隐触发重排导致滚动偏移：如果显示/隐藏的元素使用了定位、浮动等属性，显隐操作触发了页面重排，可能间接影响容器的滚动位置计算，引发跳回问题。

排查验证方向 #

• 临时注释掉元素显隐的代码，只保留滚动值的打印，看滚动时是否还会出现跳回，以此确认是否是元素显隐导致的高度变化问题。
• 检查滚动监听函数的逻辑，确保没有意外修改 scrollTop 的语句。
• 查看显隐元素的样式，确认是否有会影响容器高度的属性（比如固定高度、margin-top/bottom等）。

内容的提问来源于stack exchange，提问作者rey2197