scrollIntoView仅适用于IFRAME

Question

我有一个带有scollbars的页面内的元素,通过JS调用将其带入页面加载视图element.scrollIntoView()- 这可以正常工作,如预期的那样.

现在,如果我将此页面放入IFRAME,调用element.scrollIntoView()不仅会将iframe中的元素带到iframe的顶部 - 如果父页面具有自己的滚动条 - 它也会滚动父页面以引入有问题的元素也是父页面的顶部.

我理解这可能是设计行为,但是有没有办法只将"scrollIntoView"行为包含在IFRAME中,或者是否有任何替代方法可以有这种行为(不影响父页面).

Answer 1

搞清楚了.我可以将元素的父scrollTop元素设置为元素自己的元素offsetTop.这将使父卷轴滚动到元素的位置,效果将是IFRAME的本地.

Answer 2

上述解决方案确实有效，但您将无法应用平滑的滚动行为。遇到了同样的问题，并认为您实际上可以通过使用来修复scrollTo，然后您就可以添加平滑的滚动。

假设container、 和element分别是固定大小容器的 DOM 元素和要滚动到的元素：

container.scrollTo({
    top: element.offsetTop,
    behavior: 'smooth',
  })

然后您可以选择是使用 jQuery 还是引用来获取给定的 DOM 元素。