根据顶部窗口的scrollTop定位弹出式iframe

Question

我正在开发插件，它有一些弹出窗口。插件包含在某些页面上，如iframe但具有不同的域名。除了添加此iframe之外，不允许在该页面上进行任何其他更改。

<iframe class="frame" style="width:100%" src="another-domain.com" frameborder="0" scrolling="no" height="4500px"></iframe>

注意滚动=“否”，高度比页面高度大得多。 弹出窗口应该在页面上垂直居中，无论用户向下滚动页面多少都无关紧要。见图

我尝试了$（top.window）.scrollTop（）但是存在跨域问题。

有没有css技巧可以做到这一点？

提前谢谢。

Answer 1

您可以尝试使用transform: translate()函数CSS

＆＃13;

＆＃13;

iframe {
  top: 50%;
  position: absolute;
  transform: translateY(-50%);
  }

＆＃13;

<iframe class="frame" style="width:100%" src="another-domain.com" frameborder="0" scrolling="no" height="4500px"></iframe>

＆＃13;

＆＃13;

＆＃13;