1

回避策がないように見えるレンダリング エンジン (または機能) のバグが原因で、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 内にフラッシュ オブジェクトがある場合に発生します。スクロールすると、フラッシュ オブジェクトにマウスを合わせるまで、すべてが期待どおりに機能します。これを行うと、フラッシュはフォーカスを奪い、div ではなくドキュメントのスクロールを開始します。これは webkit でのみ発生するようです。

私が見つけた唯一の回避策は、フラッシュの周りに div を追加し (私が提供した HTML の .video)、次を追加することです。

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

問題は、flash/div をその親の背後に移動するため、まだ表示されていてスクロールが機能している間は、flash を操作できなくなります。

これを回避することは可能ですか？を削除position: fixed;すると機能するため、フォーカスを盗むことは問題ではなく、固定位置が問題です。

アップデート：

いくつかの JS ソリューションを試してみましたが、うまくいきませんでした。z-index の「ハック」を使用して、スクロールの開始/停止時に z-index が -1/0 の間で変化しても機能しませんでした。これは、フラッシュの上にカーソルを置いているときに jQuery がスクロール イベントを認識しないためです。また、最初のクリックが通過しないため、フラッシュをdivで覆い、クリックで削除しても機能しません（JSにフラッシュをクリックさせることはできません）。

4

1 に答える 1

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/

于 2013-03-16T03:10:29.953 に答える