CSS 当模态对话框长于屏幕时如何滚动页面？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10476632/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to scroll the page when a modal dialog is longer than the screen?
提问by David Tuite
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.
我的应用程序中有一个模态对话框，它在 y 方向上可能会很长。这引入了一个问题，即对话框的某些内容隐藏在页面底部之外。
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 Trellothen you know what I'm going for.
我希望窗口滚动条在显示时滚动对话框，并且太长而无法适应屏幕，但将主体留在模态后面。如果您使用Trello，那么您就知道我要做什么。
Is this possible without using JavaScript to control the scrollbar?
这可能不使用 JavaScript 来控制滚动条吗？
Here is the CSS I have applied to my modal and dialog so far:
这是到目前为止我已应用于我的模态和对话框的 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;
}
回答by Amit Kumar Pawar
just use
只是使用
.modal-body {
max-height: calc(100vh - 210px);
overflow-y: auto;
}
it will arrange your modal and then give it an vertical scroll
它会安排你的模态，然后给它一个垂直滚动
回答by 0x0049
This is what fixed it for me:
这就是为我修复它的原因：
max-height: 100%;
overflow-y: auto;
EDIT: I now use the same method currently used on Twitter where the modal acts sort of like a separate page on top of the current content and the content behind the modal does not move as you scroll.
编辑：我现在使用当前在 Twitter 上使用的相同方法，其中模式的行为有点像当前内容顶部的单独页面，并且模式后面的内容在您滚动时不会移动。
In essence it is this:
本质上是这样的：
var scrollBarWidth = window.innerWidth - document.body.offsetWidth;
$('body').css({
marginRight: scrollBarWidth,
overflow: 'hidden'
});
$modal.show();
With this CSS on the modal:
在模态上使用此 CSS：
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: auto;
JSFiddle: https://jsfiddle.net/0x0049/koodkcng/
Pure JS version (IE9+): https://jsfiddle.net/0x0049/koodkcng/1/
JSFiddle：https://jsfiddle.net/0x0049/koodkcng/
纯JS版本（IE9+）：https: //jsfiddle.net/0x0049/koodkcng/1/
This works no matter the height or width of the page or modal dialog, allows scrolling no matter where your mouse/finger is, doesn't have the jarring jump some solutions have that disable scroll on the main content, and looks great too.
无论页面或模态对话框的高度或宽度如何，这都有效，无论您的鼠标/手指在哪里，都允许滚动，没有刺耳的跳跃，某些解决方案禁用了主要内容的滚动，而且看起来也很棒。
回答by bitoshi.n
Change position
改变 position
position:fixed;
overflow: hidden;
to
到
position:absolute;
overflow:scroll;
回答by Radek Pech
Here is my demo of modal window that auto-resize to its content and starts scrolling when it does not fit the window.
这是我的模态窗口演示，它会自动调整其内容的大小并在它不适合窗口时开始滚动。
Modal window demo(see comments in the HTML source code)
模态窗口演示（参见 HTML 源代码中的注释）
All done only with HTML and CSS- no JS required to display and resize the modal window (but you still need it to display the window of course- in new version you don't need JS at all).
所有这些只用 HTML 和 CSS 完成——不需要 JS 来显示和调整模式窗口的大小（但你当然仍然需要它来显示窗口——在新版本中你根本不需要 JS）。
Update (more demos):
更新（更多演示）：
The point is to have outer and inner DIVs where the outer one defines the fixed position and the inner creates the scrolling. (In the demo there are actually more DIVs to make them look like an actual modal window.)
关键是要有外部和内部 DIV，其中外部定义固定位置，内部创建滚动。（在演示中实际上有更多的 DIV 使它们看起来像一个实际的模态窗口。）
#modal {
position: fixed;
transform: translate(0,0);
width: auto; left: 0; right: 0;
height: auto; top: 0; bottom: 0;
z-index: 990; /* display above everything else */
padding: 20px; /* create padding for inner window - page under modal window will be still visible */
}
#modal .outer {
box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box;
width: 100%;
height: 100%;
position: relative;
z-index: 999;
}
#modal .inner {
box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box;
width: 100%;
height: auto; /* allow to fit content (if smaller)... */
max-height: 100%; /* ... but make sure it does not overflow browser window */
/* allow vertical scrolling if required */
overflow-x: hidden;
overflow-y: auto;
/* definition of modal window layout */
background: #ffffff;
border: 2px solid #222222;
border-radius: 16px; /* some nice (modern) round corners */
padding: 16px; /* make sure inner elements does not overflow round corners */
}
回答by Evans Kwachie
Here.. Works perfectly for me
在这里..对我来说非常适合
.modal-body {
max-height:500px;
overflow-y:auto;
}
回答by Chimdi2000
fixed positioning alone should have fixed that problem but another good workaround to avoid this issue is to place your modal divs or elements at the bottom of the page not within your sites layout. Most modal plugins give their modal positioning absolute to allow the user keep main page scrolling.
单独的固定定位应该已经解决了这个问题，但另一个避免这个问题的好方法是将你的模态 div 或元素放在页面底部而不是你的站点布局内。大多数模态插件都提供了绝对的模态定位，以允许用户保持主页滚动。
<html>
<body>
<!-- Put all your page layouts and elements
<!-- Let the last element be the modal elemment -->
<div id="myModals">
...
</div>
</body>
</html>
回答by Ashiqur Rahman
simple way you can do this by adding this css So, you just added this to CSS:
您可以通过添加此 css 来完成此操作的简单方法因此，您只需将其添加到 CSS：
.modal-body {
position: relative;
padding: 20px;
height: 200px;
overflow-y: scroll;
}
and it's working!
它正在工作！
回答by o.v.
position:fixedimplies that, well, the modal window will remain fixed relative to the viewpoint. I agree with your assessment that it's appropriate in this scenario, with that in mind why don'y you add a scrollbar to the modal window itself?
position:fixed这意味着，模态窗口将相对于视点保持固定。我同意你的评估，它在这种情况下是合适的，考虑到这一点，你为什么不向模态窗口本身添加滚动条？
If so, correct max-heightand overflowproperties should do the trick.
如果是这样，正确max-height和overflow属性应该可以解决问题。
回答by David Tuite
In the end I had had to make changes to the content of the page behind the modal screen to ensure that it never got long enough to scroll the page.
最后，我不得不对模态屏幕后面的页面内容进行更改，以确保它永远不会有足够长的时间来滚动页面。
Once I did that, the problems I encountered when applying position: absoluteto the dialog were resolved as the user could no longer scroll down the page.
一旦我这样做了，我在申请position: absolute对话框时遇到的问题就解决了，因为用户无法再向下滚动页面。
回答by karlludwigweise
I wanted to add my pure CSS answer to this problem of modals with dynamic width and height. The following code also works with the following requirements:
我想为这个具有动态宽度和高度的模态问题添加我的纯 CSS 答案。以下代码也适用于以下要求：
- Place modal in center of screen
- If modal is higher than viewport, scroll dimmer (not modal content)
- 将模态放在屏幕中央
- 如果模态高于视口，滚动调光器（不是模态内容）
HTML:
HTML：
<div class="modal">
<div class="modal__content">
(Long) Content
</div>
</div>
CSS/LESS:
CSS/更少：
.modal {
position: fixed;
display: flex;
align-items: center;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: @qquad;
overflow-y: auto;
background: rgba(0, 0, 0, 0.7);
z-index: @zindex-modal;
&__content {
width: 900px;
margin: auto;
max-width: 90%;
padding: @quad;
background: white;
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.75);
}
}
This way the modal is always within the viewport. The width and height of the modal are as flexible as you like. I removed my close icon from this for simplicity.
这样模态总是在视口内。模态的宽度和高度随心所欲。为简单起见，我从中删除了我的关闭图标。
