1

我有一个自写的灯箱，可以从数据库中动态加载内容，结果是这样的：

<div class="lightbox">

    <div class="lbtop">

    </div>

    <div class="lbcontent">

        lightbox content

    </div>

    <div class="lbbot">

    </div>

</div>

灯箱中的所有元素都是块级元素，并且是浮动的（包括 p、h1 等子元素）。

灯箱使用固定定位来确保它始终在同一个地方，如下所示：

.lightbox {

    width: 320px;
    height: auto;
    z-index: 999;
    position: fixed;
    top: 0;
    left: 0;
    display: block;
    overflow-y: scroll;

}

到现在为止还挺好。向灯箱添加内容也完全没有问题，并且元素都很好地滚动。

但是，当我尝试在灯箱内添加 iframe（特别是：soundcloud embeds）时，iframe 元素的滚动方式与灯箱内的其他元素不同，如下所示：

iframe 移过内容（不是正确的位置）

在此示例中，我刚刚向下滚动，并且 iframe 元素现在移动到文本上方，而不是停留在原处。

我已经尝试了使用 CSS 位置、溢出的不同组合的大量解决方案，甚至尝试为此构建我自己的 jQuery 驱动修复（将 iframe 包装在正确定位的 div 中），但无济于事。总而言之，我觉得这可能是 webkit 中的一个错误（我在 Android 上遇到了问题，我正在开发的网站是一个移动网站）。我确实解决了 iOs 中的错误-webkit-overflow-scrolling : touch;（任何人，有没有 android 替代品？）。

在网上搜索修复也没有给我任何可用的结果。我得到的最接近的是将灯箱的位置设置为绝对，但这会影响灯箱的功能，并且不能满足我的要求。

我很想对此提出任何建议:)在此先感谢:)

4

1 回答 1

1

过了一会儿，我设法解决了这个问题。这是一个仅在 SDK 的 android 模拟器中（奇怪地）出现的问题。太糟糕了，我花了这么多时间来修复它，但我认为阻止其他人浪费时间可能会很好。

如果您遇到此问题，请在物理 android 设备上仔细检查，因为对我而言问题不存在（跨不同的操作系统/浏览器版本）

于 2013-04-06T21:31:20.403 回答