scrollIntoView仅适用于IFRAME

Question

我在一个带有scollbars的页面中有一个元素，通过JS调用element.scrollIntoView()在页面加载时进入视图 - 这正如预期的那样工作正常。

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

我理解这可能是设计行为，但有没有办法只将“scrollIntoView”行为包含在IFRAME中，或者是否有任何替代方法可以有这种行为（不影响父页面）。

Answer 1

Figured it out。我可以将元素的父级scrollTop设置为元素自己的offsetTop。这将使父级滚动到元素的位置，效果将是IFRAME的本地。

Answer 2

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

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

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

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

Answer 3

如何？

window.parent.scrollTo(0,0);