css - 当模态对话框比屏幕长时如何滚动页面？

Question

我的应用程序中有一个模态对话框，它在 y 方向上可能会变得很长。这引入了一个问题，即对话框的某些内容隐藏在页面底部之外。

我希望窗口滚动条在显示时滚动对话框，并且太长而无法在屏幕上显示，但将主体留在模式后面。如果你使用 Trello那你就知道我要干什么了。

如果不使用 JavaScript 来控制滚动条，这可能吗？

这是我目前应用到模式和对话框的 CSS:

body.blocked {
  overflow: hidden;
}

.modal-screen {
  background: #717174;
  position: fixed;
  overflow: hidden;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0.9;
  z-index: 50;
}

.dialog {
  background: #fff;
  position: fixed;
  padding: 12px;
  top: 20%;
  left: 50%;
  z-index: 10000;
  border-radius: 5px;
  box-shadow: 0, 0, 8px, #111;
}

Answer 1

尝试:

.modal-body {
    max-height: calc(100vh - 210px);
    overflow-y: auto;
}

它会排列你的模式，然后给它一个垂直滚动