当模式对话框比屏幕长时,如何滚动页面？

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

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

Answer 2

这就是为我解决的问题:

max-height: 100%;
overflow-y: auto;

编辑:我现在使用当前在Twitter上使用的相同方法,其中模态行为类似于当前内容之上的单独页面,并且模式后面的内容在您滚动时不会移动.

本质上是这样的:

var scrollBarWidth = window.innerWidth - document.body.offsetWidth;
$('body').css({
  marginRight: scrollBarWidth,
  overflow: 'hidden'
});
$modal.show();

有了这个模态的CSS:

position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: auto;

JSFiddle:https://jsfiddle.net/0x0049/koodkcng/
纯JS版(IE9 +):https://jsfiddle.net/0x0049/koodkcng/1/

无论页面或模式对话框的高度或宽度如何都可以工作,无论你的鼠标/手指在哪里都可以滚动,没有刺耳的跳跃,有些解决方案可以禁用主要内容的滚动,看起来也很棒.

Answer 3

更改 position

position:fixed;
overflow: hidden;

至

position:absolute;
overflow:scroll;

Answer 4

这是我的模态窗口演示，它会自动调整其内容的大小并在它不适合窗口时开始滚动。

模态窗口演示（参见 HTML 源代码中的注释）

所有这些只用 HTML 和 CSS 完成——不需要 JS 来显示和调整模式窗口的大小（但你当然仍然需要它来显示窗口——在新版本中你根本不需要 JS）。

更新（更多演示）：

• 模态窗口与顶部对齐

• 居中模态窗口

• 使用 Javascript 的旧演示

关键是要有外部和内部 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 */
        }