javascript - 如果调用中间滚动，jQuery 滚动到顶部卡住

Question

我有一些使用 jQuery 的 scrollTop(0) 方法的代码，该方法在 Chrome(版本 56.0.2924.87)上无法正常工作。

我的代码设置了 2 秒超时，执行以下操作:

• 滚动到屏幕顶部。
• 取消隐藏宽度和高度均为 100% 的 div，并请求用户完成某些操作。
• 将一个类附加到设置 overflow:hidden 的 html 标记。
• 用户完成操作后，它将删除该类并隐藏 div，以便他们可以继续滚动。

这正在 Firefox 上运行 relibaly。

在 Chrome 上，如果在用户未滚动时执行 2 秒超时，则它会按预期工作。但是，如果在用户滚动过程中调用 2 秒超时，则看起来会卡住。

我创建了this Plunker包含所有代码。如果您在内嵌演示窗口中进行测试，则不会出现此问题，您需要单击“在单独窗口中预览”(代码演示右上角的蓝色按钮)。

在我的演示中，如果在我不主动滚动时发生超时，则会发生以下情况:

如果在我向下滚动(滚动中间)时执行超时，则会发生以下情况:

即使用户当前正在页面上滚动，如何才能在 Chrome 上可靠地执行此操作？

Answer 1

为什么显示时看不到div。当在滚动过程中调用该事件时，滚动条会隐藏，并且 div 会出现在页面顶部，但您的视口(viewport)并不位于顶部位置。如果将 div CSS 位置属性设置为固定，它将起作用，css position 。位置属性的固定值是相对于视口(viewport)的。

所以问题不在你的 jquery 代码上。

code here

plunker

并检查一下:

• 滚动到屏幕顶部。

• 用户完成操作后，它将删除该类并隐藏 div，以便他们可以继续滚动。

我觉得如果能继续保持之前穿的位置就最好了。