Question

我正在尝试将大量文本放入使用Twitter Bootstrap创建的模式框中，但我遇到了问题：内容拒绝滚动。我尝试添加overflow:scroll和overflow-y:scroll，但无济于事;这只会导致它显示滚动条而不实际启用滚动。

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

Answer 1

在Bootstrap.css中，将模态的背景属性（position）从fixed更改为absolute

Answer 2

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

之前（bootstrap默认）：

.modal {

    overflow-y: auto;
}

之后（编辑后）：

.modal {

    overflow-y: scroll;
}

Answer 3

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

UX警告

如果您的模态包含太多以至于需要滚动，请问自己是否应该使用模态。默认情况下，引导模式的大小是对视觉信息应该适合的数量的一个很好的约束。根据您的制作，您可能希望选择新页面或向导。

实际解决方案

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

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

<强>更新

请注意，在Bootstrap 3中，模式已经过重构，以便更好地处理溢出内容。您可以在视口下方向上和向下滚动模态本身。

Answer 4

如果我没记错的话，设置溢出：隐藏在身体上并没有在我为移动网站构建的模态库测试的所有浏览器上工作。具体来说，即使我把溢出：隐藏在身体上，除了模态滚动之外我还无法阻止身体滚动。

对于我当前的网站，我最终做了类似的事情。除了设置＆＃34;溢出＆＃34;它基本上只存储您当前的滚动位置。到＆＃34;隐藏＆＃34;在页面主体上，然后在模态关闭后恢复滚动位置。当一个已经激活时，另一个引导模态打开时，存在一个条件。否则，其余代码应该是自解释的。请注意，如果隐藏在主体上的溢出物不会阻止窗口滚动到给定的浏览器，这至少会在退出时将原始滚动位置设置回来。

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

对于这种情况，您可以为不同的屏幕尺寸配置最大高度，并为不同的屏幕尺寸保留overflow：auto。但是，您必须确保模态页眉，页脚和正文不超过屏幕大小，因此我会在计算中包含该部分。

Answer 5

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

.modal {
  height: 60%;

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

希望它对你有所帮助。

Answer 6

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

通过停止触摸事件传播来解决问题。

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

更多细节 Add scroll event to the element inside #skrollr-body

Answer 7

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

    body.modal-open, 
    .modal-open 
    .navbar-fixed-top, 
    .modal-open 
    .navbar-fixed-bottom {
     margin-right: 15px; /*<-- to margin-right: 0px;*/
    }

Answer 8

我在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

Answer 9

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

$('.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％工作。

Answer 10

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

它对我有用

Answer 11

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

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

.modal-open {
    overflow: hidden;
}

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

添加指针事件：自动; 以使鼠标可滚动。

Answer 12

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

但滚动效果取决于"overflow-y: auto;"

中定义的属性modal-open

Answer 13

我能够通过使用＆＃34; vh＆＃34;来克服这个问题。在.modal-body元素上具有max-height的度量。 70vh看起来适合我的使用。

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

Answer 14

在 Bootstrap 5 中，用类来做：改变

<div class="modal-dialog">

到

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

另外，考虑添加类 modal-dialog-centered .

Answer 15

解决方案1 ：如果使用低于3v的bootstrap，则可以声明.modal{ overflow-y:auto}或.modal-open .modal{ overflow-y:auto}（对于已经声明的高级版本）。

Bootstrap将modal-open类添加到body以便在显示模式的情况下删除滚动条，但不向html添加任何类，这些类也可以包含滚动条，因此html的滚动条有时也可以显示，要删除它，您必须在{上设置模态显示/隐藏事件和添加/删除 overflow:hidden {1}}。在这里如何做到这一点。

html

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

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

使用此方法，您也不必处理.modal-body { overflow:auto; max-height: 65vh; }和body滚动条。

注1 ：html单位的浏览器support。

注2 ：正如提议above。如果您将vh更改为.modal{position:fixed}，但如果页面的高度超过模态，则用户可以向上滚动太多而模态将从视口中消失，这对用户体验不利。

如何在Bootstrap模式中启用滚动内容？

15 个答案: