IE滚动条+溢出滚动+ div位于顶部

Question

我有两个div。 一个div（副本）的css溢出属性设置为auto。 另一个div（覆盖层）位于顶部。 我无法更改这两个div的z索引，因为在视觉上叠加层需要位于副本的顶部。 在IE9中，“复制” div的滚动条不可单击/无法使用。 在Chrome中，它工作正常，因为我使用的是指标事件属性。 我如何才能在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）中发生此问题

Answer 1

这是因为您的z-index已设置为#overlay置于副本顶部，从而防止基础的#copy接收鼠标事件。 通过切换每个z-index，它可以正常工作。

另外，您不需要声明所有三个overflow属性。 这样就足够了：

overflow:hidden;
overflow-y:scroll;

只是抬头。

Answer 2

pointer-events （ 允许单击底层元素的CSS指针事件 ） 在IE中不起作用。

我发现 ：

通过层转发鼠标事件/

和

http://jsbin.com/uhuto