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

我的应用程序中有一个模态对话框，可以在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,8px,#111;
}

解决方法

只是使用

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

它将安排你的模态，然后给它一个垂直的滚动

原文地址：https://www.jb51.cc/css/219080.html