问：

上下文

我正在开发一个项目清单。

我在列表顶部有一个表单，用于添加新项目（只有 1 个输入和 1 个提交按钮）。

提交表单后，我有下一个代码，以便自动滚动到新元素（无论它适合列表的哪个位置）：

document.getElementById(newItemId).scrollIntoView({ behavior: "smooth" });

为了测试目的和更好地理解问题，我创建了一个巨大的列表（50 个项目），并将所有新项目放在列表的底部，这样我就可以获得更清晰的证据。

问题

创建项目 #51 时：

• 如果我单击提交按钮（只需单击鼠标），它适用于所有浏览器（在 Chrome、Firefox 和 Edge 中测试）：该项目在底部创建，浏览器向下滚动到页面末尾。

• 如果我在输入聚焦时按 ENTER 键：

  • 它不适用于 Chrome：无论整个页面高度如何，它都会像窗口中间一样停止滚动。

  

  • 它在 Edge 上不起作用：它会在新项目之前停止一点。

  

  • 它可以在Firefox上正常工作。

  

• 如果我按 Tab 键进入提交按钮，然后按 ENTER 键，它适用于所有浏览器。

注意：没有行为：“平滑”没有问题，因为它是一个即时滚动，中间没有时间被打断。

注2：我设法通过使用window.scrollTo（）方法开发了一种解决方法，但我想让它与scrollIntoView（）一起使用，以避免像素完美的计算，并将此问题报告给受影响的浏览器，以防这是一个错误。

代码示例

正如评论所建议的那样，我制作了这个 jsbin 用于测试目的：https://jsbin.com/kiwiviboro/edit?html,output

考虑：

• 我做了一个简化版本，因为我的应用程序是在 TS / React / Next 中编程的。但行为是完全一样的。
• 为了简化起见，表单实际上并没有创建一个新元素，只是滚动到最后一个元素（第 50 个）。
• 在这个简化版本中，您可以检查滚动甚至不会在 Chrome 或 Edge 上移动单个像素，因为中间没有交互/请求。
• 我在找到解决方案后做了这个，这就是为什么它包含更多逻辑。请查看我的解决方案，了解有关受影响逻辑的详细信息。
• 如果我已经找到了解决方案，为什么还要这样做？因为我想讨论这是否真的是正确的行为，或者某些浏览器是否有应该报告和修复的错误。请检查我的解决方案以找到带有固定代码的 jsbin 以得出您自己的结论