阴影 DOM 中的平滑滚动答案

【问题标题】：Smooth scrolling in the shadow DOM阴影 DOM 中的平滑滚动
【发布时间】：2019-08-26 07:52:02
【问题描述】：

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

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

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

    invalidElements[0].focus()

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

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

    invalidElement[0].id

...之后我无法访问它。我的意思是，我可以，但这意味着爬取进入每个 shadowDOM 的网站。考虑到表单的大尺寸，它有很多字段，这不会是高效的。

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

【问题讨论】：

【解决方案1】：

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

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

如果你想通过访问所有元素来慢慢滚动到元素（平滑滚动），你可以使用下面的sn-p。

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

【讨论】：