0

私は2つの部門を持っています。1 つの div (コピー) には、auto に設定された css オーバーフロー プロパティがあります。もう 1 つの div (オーバーレイ) が一番上にあります。これら 2 つの div の z-index を変更することはできません。これは、視覚的にオーバーレイがコピーの上にある必要があるためです。IE9 では、「コピー」div のスクロールバーはクリック可能/使用可能ではありません。Chrome では、pointer-events プロパティを使用しているため、問題なく動作します。この例を IE9 で動作させるにはどうすればよいですか? コンテンツをスクロールできる必要があります。

CSS

#overlay{
    width:400px;
    height:200px;
    position:absolute;
    display:block;
    background-color:#990000;
    z-index:2;
    opacity:.2;
    pointer-events:none;
}
#copy{
    overflow:auto;
    width:300px;
    height:200px;
    position:absolute;
    overflow-y: scroll;
    overflow-x: hidden;
    z-index:1;

}

HTML

<div id="overlay"></div>
<div id="copy">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus in felis elit. Mauris elementum mi non mauris euismod interdum. Morbi auctor velit lacinia augue vehicula vel egestas tortor scelerisque. Sed quis arcu massa, quis elementum ligula. Nunc et quam id ipsum consequat ullamcorper.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus in felis elit. Mauris elementum mi non mauris euismod interdum. Morbi auctor velit lacinia augue vehicula vel egestas tortor scelerisque. Sed quis arcu massa, quis elementum ligula. Nunc et quam id ipsum consequat ullamcorper.</div>

ここで例を参照してください: http://jsfiddle.net/7w4Jh/1/

この例は Webkit ブラウザーで正常に動作することに注意してください。この問題は Internet Explorer (9) でのみ発生します

4

2 に答える 2

0

pointer-events ( CSS pointer-Events To Allow Clicks On Underlying Elements ) IE で動作しない..

私が見つけた：

forwarding-mouse-events-through-layers/

と

http://jsbin.com/uhuto

于 2013-04-02T16:50:46.630 に答える
0

#overlayこれは、z-index がコピーの上に配置されるように設定されているため、基になる#copyものがマウス イベントを受信できないためです。それぞれの z-index を切り替えることで、問題なく動作します。

overflowまた、3 つのプロパティすべてを宣言する必要はありません。これで十分です：

overflow:hidden;
overflow-y:scroll;

ただ頭を上げてください。

于 2013-04-02T16:38:10.987 に答える