在阴影DOM中平滑滚动
在阴影DOM中平滑滚动
提问于 2019-04-04 22:03:26
我正在做一个web应用程序与Web组件使用聚合物。每个组件都有许多子组件，每个子组件都有自己的影子DOM。
我正在专门处理一个带有许多字段的大窗体的部分，其中一些字段位于视口之外。当我尝试提交表单时，会调用一个验证函数。对验证函数进行了调整，使其不仅返回布尔值，还设置了一个包含无效组件的数组，该组件称为“invalidElements”。
然后，我可以在第一个无效元素上调用focus，这样当我单击submit时，该元素将聚焦并进入视区。
invalidElements[0].focus()问题是，我想平滑地滚动到无效字段。我不能使用"scroll-behavior: smooth“，因为所有的I都隐藏在父组件的许多阴影DOM下。
即使我能从invalidElement那里得到id ..。
invalidElement[0].id..。之后我就不能访问它了。我的意思是，我可以，但这意味着爬行网站进入每个shadowDOM。考虑到表单的大小，如果它有很多字段，这将不会有好的性能。
我如何才能平滑地滚动到聚焦的元素？
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-04-04 23:50:09
如果我没理解错的话，你喜欢滚动到元素，而不是使用Javascript访问任何其他controls.Then，如下所示，
invalidElement.scrollIntoView({ block: "center", inline: "center"});如果你想通过访问所有元素来缓慢滚动到元素(平滑滚动)，你可以使用下面的代码片段。
invalidElement.scrollIntoView({ block: "center", inline: "center", behavior: "smooth" });页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55517944
复制相关文章
相似问题
腾讯云开发者
