如何滚动页面，当一个模式对话框比画面更久？(How to scroll the page when

2019-06-24 05:27发布

站内文章 / 后端开发

11 0

姐就是有狂的资本

女 | 书童

私信

我在我的应用程序模态对话框，可以得到在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 */
        }

Answer 5:

单独固定定位应该有固定的问题，但另一个很好的解决办法，以避免此问题，是把你的模态的div或元素在页面内没有你的网站布局的底部。大多数模态插件给自己的定位模式绝对允许用户保留主页面滚动。

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


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

        </body>
</html>

Answer 6:

在这里..完美的作品对我来说

.modal-body { 
    max-height:500px; 
    overflow-y:auto;
}

Answer 7:

你可以因此增加这个CSS做这个简单的方法，您只需添加这CSS：

.modal-body {
position: relative;
padding: 20px;
height: 200px;
overflow-y: scroll;
}

它的工作！

Answer 8:

position:fixed意味着，以及，所述模式窗口将保持相对于视点固定。我也是这样想的，它是适当的在这种情况下，考虑到这一点，为什么don'y你添加一个滚动条的模态窗口本身？

如果是这样，正确的max-height和overflow属性应该做的伎俩。

Answer 9:

最后，我不得不进行更改模式屏幕后面的页面的内容，以确保它从来没有得到足够长的时间来滚动页面。

一旦我做到了，我遇到的问题时，采用position: absolute的对话得到解决的用户将无法再向下滚动页面。

Answer 10:

窗口Page点击滚动条时，莫代尔是开放的

这一次对我的作品。纯CSS。

<style type="text/css">

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

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

</style>

试试吧，让我知道

Answer 11:

我想我的纯CSS的答案添加到动态的宽度和高度情态动词的这个问题。下面的代码还与下列要求：

将模式在屏幕中心
如果modal比视高，滚动调光器（不是模态的内容）

HTML：

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

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

这样的模式总是视之内。该模式的宽度和高度都像你一样灵活。我删除了我的关闭图标从这个为了简单。

文章来源: How to scroll the page when a modal dialog is longer than the screen?