75

我正在尝试将大量文本放入使用 Twitter Bootstrap 创建的模式框中，但我遇到了一个问题：该内容拒绝滚动。

我尝试添加overflow:scrolland overflow-y:scroll，但无济于事；这只会导致它显示滚动条而没有实际启用滚动。

这背后的原因是什么，我该怎么办？

4

16 回答 16

62

在 Bootstrap.css 中将positionModal 的背景属性 ( ) 从fixed更改为absolute

于 2011-10-16T22:46:10.913 回答
48

在 Bootstrap 3 中，您必须更改css类.modal

之前（引导默认）：

.modal {

    overflow-y: auto;
}

之后（在你编辑之后）：

.modal {

    overflow-y: scroll;
}
于 2013-12-06T16:53:46.940 回答
18

这个答案实际上有两个部分，一个UX 警告和一个实际解决方案。

用户体验警告

如果您的模态包含太多需要滚动的内容，请问问自己是否应该使用模态。默认情况下，bootstrap 模态的大小是一个很好的约束，可以限制视觉信息的大小。根据您正在制作的内容，您可能想要选择新页面或向导。

实际解决方案

在这里：http: //jsfiddle.net/ajkochanowicz/YDjsE/2/

此解决方案还将允许您更改高度，.modal并在.modal-body必要时使用垂直滚动条占用剩余空间。

更新

请注意，在 Bootstrap 3 中，模式已被重构以更好地处理溢出的内容。当模态在视口下流动时，您将能够上下滚动模态本身。

于 2012-05-23T12:59:57.540 回答
7

modal-body为而不是为整个模态设置高度，以在模态覆盖上获得完美的滚动。我让它像这样工作：

.MyModal {
    height: 450px;
    overflow-y: auto;
}

在这里您可以根据您的要求设置高度。

于 2015-07-14T12:43:01.417 回答
4

这就是我纯粹使用 CSS 覆盖某些类的方式：

.modal {
  height: 60%;

  .modal-body {
    height: 80%;
    overflow-y: scroll;
  }
}

希望它可以帮助你。

于 2012-01-23T19:15:10.443 回答
4

如果我没记错的话，在我为移动网站构建的模态库测试的所有浏览器上，设置溢出：隐藏在正文上并不起作用。具体来说，即使我将溢出：隐藏在主体上，除了模态滚动之外，我在阻止主体滚动方面也遇到了麻烦。

对于我当前的网站，我最终做了这样的事情。除了在页面正文上将“溢出”设置为“隐藏”之外，它基本上只是存储您当前的滚动位置，然后在模式关闭后恢复滚动位置。当另一个引导模式打开而一个已经处于活动状态时，其中有一个条件。否则，其余代码应该是不言自明的。请注意，如果 body 上的 overflow:hidden 不会阻止给定浏览器的窗口滚动，这至少会在退出时将原始滚动位置设置回来。

function bindBootstrapModalEvents() {
    var $body = $('body'),
        curPos = 0,
        isOpened = false,
        isOpenedTwice = false;
    $body.off('shown.bs.modal hidden.bs.modal', '.modal');
    $body.on('shown.bs.modal', '.modal', function () {
        if (isOpened) {
            isOpenedTwice = true;
        } else {
            isOpened = true;
            curPos = $(window).scrollTop();
            $body.css('overflow', 'hidden');
        }
    });
    $body.on('hidden.bs.modal', '.modal', function () {
        if (!isOpenedTwice) {
            $(window).scrollTop(curPos);
            $body.css('overflow', 'visible');
            isOpened = false;
        }
        isOpenedTwice = false;
    });
}

如果您不喜欢这样，另一种选择是将 max-height 和 overflow:auto 分配给 .modal-body ，如下所示：

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

对于这种情况，您可以为不同的屏幕尺寸配置最大高度，并为不同的屏幕尺寸保留溢出：自动。不过，您必须确保模态页眉、页脚和正文的总和不超过屏幕大小，因此我会将这部分包括在您的计算中。

于 2014-07-22T23:21:57.323 回答
2

当使用带有 skrollr 的 Bootstrap 模态时，模态将变得不可滚动。

解决了停止传播触摸事件的问题。

$('#modalFooter').on('touchstart touchmove touchend', function(e) {
    e.stopPropagation();
});

将滚动事件添加到#skrollr-body 内的元素中的更多详细信息

于 2014-10-04T13:18:35.007 回答
1

我在 iPhone6 上的 Mobile Safari 上遇到了这个问题

Bootstrap 在.modal-open打开模式时将类添加到正文中。

我尝试对 Bootstrap 3.2.0 进行最小的覆盖，并提出以下建议：

.modal-open {
    position: fixed;
}

.modal {
    overflow-y: auto;
}

为了比较，我在下面包含了相关的 Bootstrap 样式。

从 bootstrap/less/modals.less 中选择的摘录（不要在你的修复中包含这个）：

// Kill the scroll on the body
.modal-open {
  overflow: hidden;
}

// Container that the modal scrolls within
.modal {
  display: none;
  overflow: hidden;
  position: fixed;
  -webkit-overflow-scrolling: touch;
}

.modal-open .modal {
  overflow-x: hidden;
  overflow-y: auto;
}

使用的移动 Safari 版本：User-Agent Mozilla/5.0 (iPhone; CPU iPhone OS 8_1 like Mac OS X) AppleWebKit/600.1.4 (KHTML, like Gecko) Version/8.0 Mobile/12B411 Safari/600.1.4

于 2014-11-21T04:21:05.193 回答
1

实际上，对于 Bootstrap 3，您还需要覆盖主体上的 .modal-open 类。

    body.modal-open, 
    .modal-open 
    .navbar-fixed-top, 
    .modal-open 
    .navbar-fixed-bottom {
     margin-right: 15px; /*<-- to margin-right: 0px;*/
    }
于 2013-10-16T23:43:35.460 回答
1 
.modal-body {
    max-height: 80vh;
    overflow-y: scroll;
}

这对我有用

于 2017-02-15T04:52:38.330 回答
1

我遇到了同样的问题，并找到了如下修复：

$('.yourModalClassOr#ID').on('shown.bs.modal', function (e) {
    $(' yourModalClassOr#ID ').css("max-height", $(window).height());
    $(' yourModalClassOr#ID ').css("overflow-y", "scroll");          /*Important*/
    $(' yourModalClassOr#ID ').modal('handleUpdate');

});

100% 工作。

于 2016-04-08T06:41:06.330 回答
0

在 Bootstrap 5 中，使用类：更改

<div class="modal-dialog">

至

<div class="modal-dialog modal-dialog-scrollable">

另外，考虑添加 class modal-dialog-centered。

于 2021-05-09T23:44:38.603 回答
0

我能够通过在 .modal-body 元素上使用带有 max-height 的“vh”度量来克服这个问题。70vh 看起来很适合我的用途。

.modal-body {
   overflow-y: auto;
   max-height: 70vh;
}
于 2016-10-25T13:21:47.260 回答
0

使用所有这些提到的解决方案后，我仍然无法使用鼠标滚动滚动，键盘向上/向下按钮正在滚动内容。

所以我在下面添加了css修复以使其正常工作

.modal-open {
    overflow: hidden;
}

.modal-open .modal {
    overflow-x: hidden;
    overflow-y: auto;
    **pointer-events: auto;**
}

添加了指针事件：自动；使其鼠标可滚动。

于 2016-07-14T05:01:58.780 回答
0

当我们打开或关闭模态框时，Bootstrap 会"modal-open"在标签中添加或删除 css 。<body>因此，如果您打开多个模态，然后关闭任意一个，则 modal-open css 将从 body 标记中删除。

但是滚动效果取决于"overflow-y: auto;"定义的属性modal-open

于 2016-09-25T08:15:53.270 回答
-2

解决方案 1：您可以声明.modal{ overflow-y:auto}，或者.modal-open .modal{ overflow-y:auto}如果您使用低于 3v 的引导程序（对于更高版本，它已经声明）。

Bootstrap 添加modal-open类以body在显示模式时删除滚动条，但不添加任何html也可以具有滚动条的类，因此html有时滚动条也可以看到，要删除它，您必须设置模式显示/隐藏事件并添加/删除 overflow:hidden。html在这里如何做到这一点。

$('.modal').on('hidden.bs.modal', function () {
   $('html').css('overflow','auto');
}).on('shown.bs.modal', function () {
   $('html').css('overflow','hidden');
});

解决方案 2：由于模态具有功能键，处理此问题的最佳方法是固定高度，甚至更好地将模态的高度与视口的高度连接起来，如下所示 -

.modal-body {
     overflow:auto; 
     max-height: 65vh;
}

body使用这种方法，您也不必处理html滚动条。

注 1：浏览器支持单位vh。

注 2：如前所述。如果您更改.modal{position:fixed}为.modal{position:absolute}，但如果页面的高度超过模态用户可以向上滚动太多并且模态将从视口中消失，这对用户体验不利。

于 2015-03-19T07:33:06.080 回答