在阴影中平滑滚动 DOM

Question

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

我专门处理一个有很多字段的大表单部分，其中一些字段在视口之外。当我尝试提交表单时，会调用验证函数。验证函数经过调整，因此它不仅 return 一个布尔值，而且设置一个包含无效组件的数组，称为 'invalidElements'.

然后我可以在第一个无效元素上调用焦点，这样当我单击“提交”时，该元素就会聚焦并进入视口。

    invalidElements[0].focus()

问题是我想平滑地滚动到无效字段。我不能使用 "scroll-behavior: smooth" 因为所有的 id 都隐藏在父组件的许多阴影下 DOM。

即使我可以从 invalidElement[0] 获取 id ...

    invalidElement[0].id

...之后就无法访问了。我的意思是，我可以，但这意味着要抓取进入每个阴影的网站DOM。考虑到表单的大小，它有很多字段，这不会是高效的。

然后我怎样才能平滑滚动到焦点元素？

Answer 1

如果我理解正确，你喜欢滚动到元素而不访问任何其他 controls.Then 使用 Javascript 你可以实现如下，

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

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

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

Smooth scrolling in the shadow DOM