当模态对话框长于屏幕时，如何滚动页面？ [英] How to scroll the page when a modal dialog is longer than the screen?

问题描述

我在我的应用程序中有一个模态对话框，可以得到相当长的y方向。这引入了一个问题，其中一些对话框的内容被隐藏在页面底部。

I have a modal dialog in my app which can get quite long in the y direction. This introduces a problem whereby some of the content of the dialog is hidden off the bottom of the page.

我希望窗口滚动条在显示时滚动对话框，在屏幕上，但离开主体在模态后面的位置。如果您使用 Trello ，那么您就会知道我要去的地方。

I would like the window scrollbar to scroll the dialog when it is displayed and too long to fit on the screen but leave the main body in place behind the modal. If you use Trello then you know what I'm going for.

这是否可以不使用JavaScript来控制滚动条？

Is this possible without using JavaScript to control the scrollbar?

这是到目前为止我应用于我的模态和对话框的CSS：

Here is the CSS I have applied to my modal and dialog so far:

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;
}

推荐答案

一旦我这样做，我遇到的问题当将 position：absolute 应用到对话框时，用户无法再向下滚动页面。

Once I did that, the problems I encountered when applying position: absolute to the dialog were resolved as the user could no longer scroll down the page.

这篇关于当模态对话框长于屏幕时，如何滚动页面？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！