水平滚动主窗口时如何使iframe改变其位置答案

【问题标题】：How to make iframe change its position when main window is horizontally scrolled水平滚动主窗口时如何使iframe改变其位置
【发布时间】：2013-12-14 09:40:05
【问题描述】：

我的 UI 中的 iframe 元素有问题。当我调整屏幕大小（使其更小）并开始使用水平滚动滚动时，它不会滚动到 iframe，但 iframe 保持在相同的固定位置，并且无法看到它。

Example

和 HTML：

<div id="top-element">Some div that has greater width than the inner div</div>
<div id="iframe-wrapper">
    <iframe src="http://www.apple.com/" scrolling="auto"></iframe>
</div>

【问题讨论】：

使用position: absolute;而不是固定的。

标签： css iframe scroll horizontal-scrolling

【解决方案1】：

您必须通过添加 left:50% 和 margin-left 一半的 iframe 宽度来使其居中，例如：

div#iframe-wrapper {
    position: fixed;
    left: 50%;
    margin-left:-150px; /* this must be the half of the iframe's width */

 }

您可以通过添加 top:50% 和 margin-top:(减去 iframe 高度的一半)来垂直居中。您不需要关于定位的底部或“div#iframe-wrapper iframe”

【讨论】：