javascript - IE Scrollbar + Overflow Scroll + div on top of the

Question

我有两个 div。一个 div(副本)的 css overflow 属性设置为 auto。另一个 div(覆盖层)位于顶部。我无法更改这两个 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) 中

Answer 1

这是因为您的 z-index 设置为 #overlay 位于副本的顶部，防止底层 #copy 接收鼠标事件。通过切换每个的 z-index，它工作得很好。

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

overflow:hidden;
overflow-y:scroll;

提醒一下。