Css 如何启用模式内的内容滚动？

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

我尝试添加了

overflow:scroll

和

overflow-y:scroll

，但没有效果；这只会导致它显示一个滚动条，而不会实际启用滚动

---

这背后的原因是什么？我能做什么？

在Bootstrap.css中，将model的背景属性（

位置

）从

固定

更改为

绝对

，这就是我在css覆盖某些类时所做的：

.modal {
  height: 60%;

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

---

希望对您有所帮助。

这个答案实际上有两个部分，一个是用户体验警告，一个是实际解决方案

UX警告

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

实际解决方案

这是：

此解决方案还允许您更改

.modal

的高度，并在必要时使用垂直滚动条使

.modal主体

占据剩余空间

更新

---

请注意，在Bootstrap3中，已对模式进行重构，以更好地处理溢出的内容。当模态在视口下流动时，您可以上下滚动模态本身。

实际上，对于Bootstrap 3，您还需要覆盖body上的.modal打开类

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

body.modal-open，
.模态开放
.导航条固定顶部，
.模态开放
.导航条固定底部{
右边距：15px；/*在bootstrap3中，您必须更改
css
class
。model

之前（引导默认值）：

.modal {

    overflow-y: auto;
}

.modal {

    overflow-y: scroll;
}

之后（编辑后）：

.modal {

    overflow-y: auto;
}

.modal {

    overflow-y: scroll;
}

如果我没记错的话，设置overflow:hidden on the body在我为一个移动站点构建的模式库测试的所有浏览器上都不起作用。具体地说，即使我在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;
    });
}

如果您不喜欢此选项，另一个选项是为.modal body指定一个max height and overflow:auto，如下所示：

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

在这种情况下，您可以为不同的屏幕大小配置最大高度，并为不同的屏幕大小保留overflow:auto。但是，您必须确保模式页眉、页脚和正文的总和不超过屏幕大小，因此我会将该部分包括在您的计算中。
在将引导模式与skrol一起使用时lr，模式将变得不可滚动

已修复阻止触摸事件传播的问题

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

详情请浏览
我的iPhone 6上的Mobile Safari出现了这个问题

当模态打开时，引导将类
.modal open
添加到主体中

我尝试对Bootstrap 3.2.0进行最小覆盖，并得出以下结论：

.modal-open {
    position: fixed;
}

.modal {
    overflow-y: auto;
}

为了进行比较，我在下面列出了相关的引导样式

从bootstrap/less/modals.less中选择的摘录（不包括在您的修复程序中）：

使用的移动Safari版本：
用户代理Mozilla/5.0（iPhone；CPU iPhone OS 8_1像Mac OS X）AppleWebKit/600.1.4（KHTML像Gecko）版本/8.0移动/12B411 Safari/600.1.4
解决方案1：您可以声明
.modal{overflow-y:auto}
或
.modal open.modal{overflow-y:auto}
如果您使用的是3v以下的引导（对于更高版本，已经声明）

Bootstrap将
modal open
类添加到
body
中，以便在显示modal时删除滚动条，但不会将任何类添加到
html
中，后者也可以有滚动条，因此
html
的滚动条有时也可以看到，要删除它，必须设置modal show/hide events和add/remove
溢出：在
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：按建议。如果将
模式{position:fixed}
更改为
。模式{position:absolute}
，但如果页面的高度超出了模态用户可以向上滚动的范围，模态将从视口中消失，这对用户体验不好。
为模态主体设置高度，而不是为整个模态设置高度，以便在模态覆盖上获得完美的滚动。我得到如下结果：

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

在这里，您可以根据自己的要求设置高度。
我也遇到了同样的问题，并找到了如下修复方法：

$('.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%工作。
使用上述所有解决方案后，我仍然无法使用鼠标滚动滚动，键盘上下按钮用于滚动内容

因此，我添加了以下css修复程序，使其能够正常工作

.modal-open {
    overflow: hidden;
}

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

添加了指针事件：自动；使其成为鼠标
.modal-body {
    max-height: 80vh;
    overflow-y: scroll;
}

<div class="modal-dialog">

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