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

Question 1

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

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

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

Question 2

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

Question 3

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

之前（bootstrap默认）：

.modal {

    overflow-y: auto;
}

之后（编辑后）：

.modal {

    overflow-y: scroll;
}

Question 4

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

UX警告

如果您的模态包含太多内容，需要滚动，请问自己是否应该使用模态。默认情况下，引导程序模态的大小对于应容纳多少视觉信息是一个很好的约束。根据您的所作所为，您可能想选择一个新页面或一个向导。

实际解决方案

在这儿： http //jsfiddle.net/ajkochanowicz/YDjsE/2/

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

更新

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

Question 5

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

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

您可以在此处根据需要设置高度。

Question 6

如果我没记错的话，在主体上为我为移动网站构建的模式库进行测试的所有浏览器上，都无法在主体上设置“ overflow：hidden”。具体来说，即使我将overflow：hidden隐藏在身体上，我也无法防止除了模式滚动之外的身体滚动。

对于当前站点，我最终做了这样的事情。除了将页面主体上的“溢出”设置为“隐藏”之外，它基本上只存储您当前的滚动位置，然后在模式关闭后恢复滚动位置。这里有一个条件，当另一个引导程序模式已经激活时，它会打开。否则，其余代码应具有自我解释性。请注意，如果主体上的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和overflow：auto，如下所示：

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

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

Question 7

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

.modal {
  height: 60%;

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

希望对您有帮助。

Question 8

当与skrollr一起使用Bootstrap模态时，该模态将不可滚动。

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

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

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

Question 9

实际上，对于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;*/
    }

Question 10

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

Question 11

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

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

Question 12

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

对我有用

Question 13

使用所有上述解决方案后，我仍然无法使用鼠标滚动来滚动，键盘上/下按钮可以滚动内容。

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

.modal-open {
    overflow: hidden;
}

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

添加了指针事件：auto; 使鼠标可滚动。

Question 14

通过在.modal-body元素上使用max-height的“ vh”度量标准，我能够克服这一问题。70vh正好适合我的用途。

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

Question 15

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

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

Question 16

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

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

$('.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}，但是如果页面的高度超过模式容器的高度，则用户可以向上滚动太多，而模式容器将从视口中消失，这对用户体验不利。