scrollIntoView() 方法在输入时按 ENTER 键触发时停止滚动到元素中途

Question

背景

我正在制定一份项目清单。

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

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

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

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

问题

创建项目#51时：

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

• 如果我在输入焦点时

  按 ENTER 键：

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

  

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

  

  • 它可以在 Firefox 上正常运行。

  

• 如果我

  按 Tab 键进入提交按钮，然后按 ENTER 键，它可以在所有浏览器中工作。

注意：没有 behavior: "smooth"

 没有问题，因为它是即时滚动，中间没有时间被打断。

注意2：我设法使用 window.scrollTo() 方法开发了一种解决方法，但我希望使其与scrollIntoView() 一起使用，以避免像素完美计算，并向受影响的浏览器报告此问题，以防出现这种情况一个错误。

Answer 1

https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

您可以考虑使用scrollIntoView方法，并将块属性设置为“end”：

document.getElementById(newItemId).scrollIntoView({ behavior: "smooth", block: "end" }); block: "end" 属性应确保项目滚动到滚动容器的底部，这应该在浏览器中保持一致。