Question

我使用position:fixed，overflow:auto和display:table的组合创建了一个与屏幕中间对齐的对话框，如下所示：

.dialog {
    position: fixed;
    left: 0; right: 0;
    top: 0; bottom: 0;
    z-index: 1000000;
    background-color: rgba(193, 208, 145, 0.75);
    text-align: center;
    overflow: auto;
}
.dialog > div {
    display: table;
    width: 100%;
    height: 100%;
}
.dialog > div > div {
    display: table-cell;
    vertical-align: middle;
}
.dialog > div > div > div {
    display: inline-block;
    text-align: left;
    min-width: 300px;
    max-width: 640px;
    border: 1px solid #004000;
    background-color: #e2ffcd;
    border-radius: 6px;
}

Demo

这效果很好，但是当对话框的内容大于屏幕时遇到问题 - 这种情况在移动设备上经常发生，但在某些情况下也可能在桌面上发生，具体取决于内容。 / p>

当发生这种情况时，滚动变得尴尬。在桌面上，用户看到两个滚动条，如果对话框本身已到达结尾，则使用鼠标滚轮将滚动对话框后面的页面。在移动设备上，触摸屏似乎需要一些严肃的说服才能理解用户想要滚动对话框，而不是整个页面。在我的3DS浏览器上测试是最糟糕的，因为圆垫会滚动整个页面，而不是对话框。

我怎样才能改善这种状况？理想情况下，我希望将页面内容锁定到位，而对话框本身就会变成＆＃34;＆＃34;用于滚动的主页面。请注意，该对话框是由JavaScript创建的，因此基于JS的问题解决方案可以接受。

改进对话框滚动

0 个答案: