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

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

css scroll

Css 当模式对话框比屏幕长时，如何滚动页面？,css,scroll,Css,Scroll,我的应用程序中有一个模态对话框，它在y方向上会很长。这会导致一个问题，即对话框的某些内容隐藏在页面底部我想窗口滚动条滚动对话框时，它是显示和太长，以适应在屏幕上，但留在后面的模式主体到位。如果你用的话，你知道我想要什么在不使用JavaScript控制滚动条的情况下，这是可能的吗以下是迄今为止我应用于模态和对话框的CSS： body.blocked { overflow: hidden; } .modal-screen { background: #717174; posit

我的应用程序中有一个模态对话框，它在y方向上会很长。这会导致一个问题，即对话框的某些内容隐藏在页面底部

我想窗口滚动条滚动对话框时，它是显示和太长，以适应在屏幕上，但留在后面的模式主体到位。如果你用的话，你知道我想要什么

在不使用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;
}

更改

位置

position:fixed;
overflow: hidden;

到

position:fixed

表示模式窗口相对于视点保持固定。我同意您的评估，在这种情况下它是合适的，记住为什么不在模式窗口本身添加一个滚动条呢

如果是这样的话，正确的

max height

和

overflow

属性应该可以做到这一点。

最后，我不得不更改模式屏幕后面页面的内容，以确保它永远不会长到足以滚动页面

一旦我这么做了，我在将

position:absolute

应用到对话框时遇到的问题已得到解决，因为用户无法再向下滚动页面。

单靠固定定位就可以解决此问题，但另一个避免此问题的好办法是将模式div或元素放置在页面底部，而不是站点内布局。大多数模式插件都提供了绝对的模式定位，允许用户保持主页滚动

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


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

        </body>
</html>

...

这就是我修复它的原因：

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:
纯JS版本（IE9+）：

无论页面或模式对话框的高度或宽度如何，它都可以工作，无论鼠标/手指在何处，都可以滚动，不存在抖动跳跃。一些解决方案禁用了对主要内容的滚动，而且看起来也很棒。

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

（请参见HTML源代码中的注释）

仅使用HTML和CSS完成所有操作-不需要JS来显示和调整模式窗口的大小（但您仍然需要它来显示窗口-在新版本中，您根本不需要JS）

更新（更多演示）：

关键是要有外部和内部div，其中外部div定义固定位置，内部div创建滚动。（在演示中，实际上有更多的div使它们看起来像一个实际的模态窗口。）

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

这个适合我。纯CSS

<style type="text/css">

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

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

</style>


body.modal-open{
右边填充：17px！重要；
}
.modal-in{
右边距：16px；

试试看，让我知道

只要使用

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

它将安排您的模式，然后在这里给它一个垂直滚动条。。对我来说非常适合

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

我想将我的纯CSS答案添加到具有动态宽度和高度的modals问题中。以下代码也适用于以下要求：

将modal放置在屏幕中央

如果模态高于视口，则滚动调光器（非模态内容）

HTML:

这样，模式总是在视口中。模式的宽度和高度可以根据您的喜好灵活调整。为了简单起见，我从中删除了关闭图标。

简单方法您可以通过添加此css来完成此操作所以，您刚刚将此添加到CSS中：

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

它正在工作！

尝试溢出：自动或溢出：在对话框中滚动…恐怕不起作用。这就像窗口没有意识到对话框有高度一样。问题是

位置：已修复；

是否可以将其更改为绝对值或其他值？如果我这样做，我会遇到另一个问题。如果用户已经在页面上向下滚动，则嘿，打开对话框，它会出现在页面的最顶端，在当前窗口的快照之外。这对我来说很有效-无论是在普通模态中，还是在模态中有模态时（引导程序说）。这实际上是OP的正确答案，因为您正在滚动页面，而不是滚动模块。一旦弹出窗口打开，您可以锁定页面以防止滚动？如果用户的鼠标位于弹出窗口外，他将滚动页面而不是弹出窗口，一旦发生这种情况，他移动到弹出窗口上，他将获得弹出窗口和页面滚动。Thanks@Adyyda您可以通过使用

溢出：隐藏将页面包装在DIV中，并将其大小设置为与页面相同，并将其边距顶部设置为滚动顶部的负数来停止滚动。这是一个很好且合适的解决方案Radek响应，跨浏览器，只需使用CSS即可完成。为我节省了一些时间，thanks@RadekPech这与在一个像演示一样简单的页面上执行html，body{overflow:hidden}
？@StevenVachon有什么区别？在一个更复杂的页面或在一个特定的浏览器设置html中，body{overflow:hidden}可能没有任何区别可能不会像预期的那样工作。因此，它看起来可能有些过分，但安全性比抱歉要好。这应该是公认的答案。优雅而简单。我们为什么要使用210px？背后有什么特殊原因吗？@ShellZero，它的总和是：模式页眉、模式页脚、模式和窗口边框之间的顶部和底部空间。是否有解决方案w没有硬编码页脚和页眉高度？如果您想让它感觉像是iOS上的常规滚动，您需要添加-webkit溢出滚动：
.modal-body { 
    max-height:500px; 
    overflow-y:auto;
}

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

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

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