Question

在我的演示http://jsfiddle.net/batfafpf/2/ 中，我的模态是不可滚动的，即使我将其设置为overflow-y：scroll。不知道为什么，父母的固定位置可能导致问题。

#dateTimeModal > div{
overflow-y:scroll;
}

Answer 1

由于样式中的两个错误，滚动事件无法正常工作。

删除，pointer-events: none;
使你的包装div固定高度。

这应该是什么。

.modalDialog {
    position: fixed;
    font-family: Arial, Helvetica, sans-serif;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,0.8);
    z-index: 99999;
    opacity:1;
    -webkit-transition: opacity 400ms ease-in;
    -moz-transition: opacity 400ms ease-in;
    transition: opacity 400ms ease-in;  
}

#dateTimeModal > div{
    overflow-y:scroll;
    height:50px;
}

Answer 2

将overflow-y: scroll;添加到此课程并移除指针 - 事件：无;

.modalDialog {
        position: fixed;
        font-family: Arial, Helvetica, sans-serif;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: rgba(0,0,0,0.8);
        z-index: 99999;
        opacity:1;
        -webkit-transition: opacity 400ms ease-in;
        -moz-transition: opacity 400ms ease-in;
        transition: opacity 400ms ease-in;

        overflow-y: scroll;
    }

<强> Live Demo

Answer 3

如前面的海报所述，删除指针事件：无。并将高度改为100％。

Answer 4

你应该设置一个高度，命令浏览器使div能够在超出设置高度时滚动。

#dateTimeModal > div{
    overflow-y:scroll;
    height: 200px;
}

溢出滚动在固定div中不起作用？

4 个答案: