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

82

我的应用程序中有一个模式对话框，可以在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;
}
css  scroll 
— 大卫·杜伊特
source
尝试在对话框中溢出：自动或溢出：滚动...
— lakshmi priya，2012年

Answers:

190

只是使用 

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

它将排列您的模态，然后对其进行垂直滚动

— 阿米特·库玛·帕瓦尔（Amit Kumar Pawar）
source
7
这应该是公认的答案。优雅而简单。
— brianfit '16
2
为什么我们必须使用210px？背后有什么特殊原因吗？
— ShellZero
9
@ShellZero，它是以下各项的总和：模态标题，模态页脚，模态和窗口边界之间的顶部和底部空间。
— Stalinko '16
3
是否有没有对页脚和页眉高度进行硬编码的解决方案？
— 帕维尔
2
如果您希望它像iOS上的常规滚动一样，则需要添加-webkit-overflow-scrolling：touch; 同样，因为Mobile Safari对待溢出滚动的方式与常规页面滚动的方式不同，除非明确要求不要这样做。
— 亚当·格瑟
38

这是为我解决的问题：

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/

无论页面或模式对话框的高度或宽度如何，此方法均有效，无论鼠标/手指位于何处，都可以滚动，没有令人讨厌的跳跃，一些解决方案可以禁用主要内容上的滚动，并且看起来也很棒。

— 0x0049
source
这是解决OP的唯一答案。模态过长时如何滚动PAGE。它实际上并没有滚动页面，但是却产生了滚动页面的错觉，适合了不希望占用屏幕底部空白的垂直空间的用例。所有其他解决方案（包括公认的答案）都存在该问题。
— Ynot
13

更改 position

position:fixed;
overflow: hidden;

至

position:absolute;
overflow:scroll;
— 比通
source
1
恐怕是行不通的。就像窗口没有意识到对话框有高度。
— 大卫·图伊特
问题是position: fixed;它可以变成绝对值吗？
— bitoshi.n 2012年
2
如果这样做，我会遇到另一个问题。如果打开对话框时用户已经向下滚动页面，则该对话框将显示在页面的顶部，而不是当前窗口的视图。
— 大卫·杜伊特
1
这对我有用-在普通模态中和当我在模态中有模态时（Bootstrap说不支持重叠模态...它都需要自定义代码）。
— eggy 2014年
这实际上是对OP的正确答案，因为您正在滚动页面，而不是滚动模式
— carkod
5

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

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

所有这些仅使用HTML和CSS即可完成-无需使用JS即可显示和调整模式窗口（但您当然仍需要它来显示模式窗口-在新版本中您根本不需要JS）。

更新（更多演示）：

关键是要具有外部DIV和内部DIV，其中外部DIV定义固定位置，而内部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 */
        }
— 拉德克·佩奇（Radek Pech）
source
您可以在打开弹出窗口后锁定页面以防止滚动吗？如果用户将鼠标置于弹出窗口之外，则他将滚动页面而不是弹出窗口，一旦发生这种情况，他将移至弹出窗口上方，他将弹出窗口并滚动页面。谢谢
— Adyyda '16
@Adyyda您可以通过将页面包装在DIV中overflow:hidden并将其大小设置为与页面相同，并将其设置margin-top为负值来停止滚动scroll-top。
— Radek Pech
Radek是一个很好且合适的解决方案-响应式，跨浏览器，只需使用CSS即可完成。谢谢，为我节省了一些时间
— Tremendus Apps 2016年
@RadekPech与这样做有html,body{ overflow:hidden }什么不同？
— 史蒂文·瓦雄
@StevenVachon在像演示这样简单的页面和有限数量受支持的浏览器中，可能没有任何区别。但是在更复杂的页面或特定的浏览器设置中html,body{ overflow:hidden }，可能无法按预期工作。因此，它看起来像是一个过大的杀伤力，但是比后悔更安全。
— Radek Pech
2

单独的固定定位应该可以解决该问题，但是避免该问题的另一个不错的解决方法是将模式div或元素放置在页面底部而不是网站布局内。大多数模式插件都给出了绝对的模式定位，以允许用户保持主页滚动。

<html>
        <body>
        <!-- Put all your page layouts and elements


        <!-- Let the last element be the modal elemment  -->
        <div id="myModals">
        ...
        </div>

        </body>
</html>
— Chimdi2000
source
1

position:fixed这意味着模态窗口相对于视点将保持固定。我同意您的评估，认为它适用于这种情况，并牢记为什么不向模式窗口本身添加滚动条？

如果是这样，正确max-height和overflow属性应该可以解决问题。

— 卵
source
0

最后，我不得不对模式屏幕后面的页面内容进行更改，以确保滚动页面的时间不会太长。

完成该操作后，解决了我在应用于position: absolute对话框时遇到的问题，因为用户无法再向下滚动页面。

— 大卫·杜伊特
source
您只是跳过了问题
— Amit Kumar Pawar
您既提问又回答了问题，您也接受了回答，那么为什么在这里发表问题呢？
— Thiyagu
2
@Thiyagu认为还可以。如果提问者找到解决方案，他们自己应该发布答案。他们也可以自由接受帮助他们的任何答案。最终目标是帮助整个社区。
— 错误
0

模态打开时，可单击窗口页面滚动条

这对我有用。纯CSS。

<style type="text/css">

body.modal-open {
padding-right: 17px !important;
}

.modal-backdrop.in {
margin-right: 16px; 

</style>

试试看，让我知道

— 真田弘之
source
-1

我想为具有动态宽度和高度的模态问题添加纯CSS答案。以下代码也符合以下要求：

  1. 将模态放置在屏幕中央
  2. 如果模态高于视口，请滚动调光器（非模态内容）

HTML：

<div class="modal">
    <div class="modal__content">
        (Long) Content
    </div>
</div>

CSS / LESS：

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

这样，模态始终在视口内。模态的宽度和高度可以任意灵活选择。为了简单起见，我从中删除了关闭图标。

— 卡洛德维格威瑟
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.