在阴影DOM中平滑滚动

Question

我正在使用Polymer使用Web组件制作的Web应用程序。每个组件都有许多子组件，每个子组件都有自己的影子DOM。

我正在专门处理一个具有许多字段的大型表单部分，其中一些在视口之外。当我尝试提交表单时，将调用验证功能。对验证函数进行了调整，以使其不仅返回布尔值，还设置了一个数组，该数组包含名为“ invalidElements”的无效组件。

然后，我可以将焦点放在第一个无效元素上，以便在单击“提交”时将其聚焦并进入视口。

    invalidElements[0].focus()

问题是我想平滑滚动到无效字段。我不能使用“滚动行为：平滑”，因为所有ID都隐藏在父组件的许多影子DOM下。

即使我可以从invalidElement [0]中获取ID，也可以...

    invalidElement[0].id

...我以后无法访问它。我的意思是，我可以，但是这意味着要爬网进入每个shadowDOM的网站。鉴于表单的大小很大，在很多字段中，这将不起作用。

然后如何平滑滚动到焦点元素？

Answer 1

如果我对您的理解是正确的，那么您可以滚动到元素而无需访问任何其他控件。然后，您可以使用Javascript来实现以下目的，

invalidElement.scrollIntoView({ block: "center", inline: "center"});

如果要通过访问所有元素来缓慢滚动到元素（平滑滚动），则可以使用以下代码段。

invalidElement.scrollIntoView({ block: "center", inline: "center", behavior: "smooth" });