Question

我在webkit中遇到的问题是由于渲染引擎（或功能）中的一个错误，我似乎无法解决这个问题。

HTML：

<div id="left">
    Content
</div>
<div id="right">
    <div id="scroll">
        <div class="video">
            <!-- Flash -->
        </div>
        Sidebar
    </div>
</div>

CSS：

#left {
    float: left;
    width: 50%;
}

#right {
    float: right;
    position: fixed;
    right: 0;
    width: 50%;
    height: 100%;
}

#scroll {
    overflow-y: auto;
    position: absolute;
    top: 0;
    bottom: 0;
}

JSFiddle：http://jsfiddle.net/andrewryno/pUaM2/1/

当我在位置固定的滚动div中有一个flash对象时，会出现问题。滚动时，一切都按预期工作，直到您将鼠标悬停在Flash对象上。一旦你这样做，闪存窃取你的焦点，并开始滚动文档，而不是div。似乎这只发生在webkit中。

我发现的唯一解决方法是在flash周围添加一个div（我在HTML中提供.video）并添加：

.video {
    position: relative;
    z-index: -1;
}

问题在于它将flash / div移动到它的父级后面，所以当它仍然可见时，滚动工作，你就不能再与flash交互了。

这甚至可以解决吗？删除position: fixed;会使其工作，因此窃取焦点不是问题，而是固定位置。

更新

尝试了一些JS解决方案，但没有一个有效。使用z-index“hack”使得z-index在滚动开始/停止时在-1/0之间变化不起作用，因为当您将鼠标悬停在闪存上时jQuery无法识别滚动事件。用div覆盖flash并在点击时删除它不起作用，因为你的第一次点击不会通过（我不能让JS点击闪光灯）。

Answer 1

为什么使用旧的嵌入代码？使用iframe，它正在成为标准。

也不需要使用固定。使用绝对。

#left {
overflow-y: auto;
position: absolute;
left:0;
width: 50%;
height: 100%;
}

#right {
overflow-y: auto;
position: absolute;
right: 0;
width: 50%;
height: 100%;
}

这有用吗？

http://jsfiddle.net/pUaM2/10/

Webkit中存在滚动，固定定位div和闪存的问题

1 个答案: