如何在引导模式中启用滚动内容?

I'm trying to fit a lot of text into a modal box created using Twitter Bootstrap but I'm having a problem: the content refuses to scroll. I tried adding overflow:scroll and overflow-y:scroll but to no avail; that merely causes it to display a scroll-bar without actually enabling scrolling.

我试图将大量的文本放入使用Twitter Bootstrap创建的模式框中，但我遇到了一个问题:内容拒绝滚动。我尝试添加溢出:滚动和溢出:滚动，但没有效果;这只会使它显示滚动条，而实际上不启用滚动条。

What's the cause behind that and what can I do?

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

15 个解决方案

#1

In Bootstrap.css change the background attribute (position) of Modal from fixed to absolute

在引导。css将模式的背景属性(位置)从固定变为绝对

#2

In Bootstrap 3 you have to change the css class .modal

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

before:

之前:

.modal {

    overflow-y: auto;
}

after:

后:

.modal {

    overflow-y: scroll;
}

#3

This answer actually has two parts, a UX warning, and an actual solution.

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

UX Warning

用户体验的警告

If your modal contains so much that it needs to scroll, ask yourself if you should be using a modal at all. The size of the bootstrap modal by default is a pretty good constraint on how much visual information should fit. Depending on what you're making, you may instead want to opt for a new page or a wizard.

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

Actual Solution

实际解决方案

Is here: http://jsfiddle.net/ajkochanowicz/YDjsE/2/

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

This solution will also allow you to change the height of .modal and have the .modal-body take up the remaining space with a vertical scrollbar if necessary.

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

UPDATE

更新

Note that in Bootstrap 3, the modal has been refactored to better handle overflowing content. You'll be able to scroll the modal itself up and down as it flows under the viewport.

注意，在Bootstrap 3中，模式被重构以更好地处理溢出内容。当它在viewport下流动时，您可以上下滚动模式本身。

#4

If I recall correctly, setting overflow:hidden on the body didn't work on all the browsers I was testing for a modal library I built for a mobile site. Specifically, I had trouble with preventing the body from scrolling in addition to the modal scrolling even when I put overflow:hidden on the body.

如果我没记错的话，设置overflow:隐藏在主体上并不能在我为移动站点构建的模态库测试的所有浏览器上工作。具体来说，我有麻烦的是，当我把溢出的东西隐藏在身体上的时候，我的身体就不会滚动到滚动页面。

For my current site, I ended up doing something like this. It basically just stores your current scroll position in addition to setting "overflow" to "hidden" on the page body, then restores the scroll position after the modal closes. There's a condition in there for when another bootstrap modal opens while one is already active. Otherwise, the rest of the code should be self explanatory. Note that if the overflow:hidden on the body doesn't prevent the window from scrolling for a given browser, this at least sets the original scroll location back upon exit.

对于我现在的网站，我最终做了这样的事情。它基本上只存储当前的滚动位置，并在页面主体上设置“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;
    });
}

If you don't like this, the other option would be to assign a max-height and overflow:auto to .modal-body like so:

如果你不喜欢这个，另一个选项是分配一个max-height和overflow:auto to .modal-body如下:

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

For this case, you could configure the max-height for different screen sizes and leave the overflow:auto for different screen sizes. You would have to make sure that the modal header, footer, and body don't add up to more than the screen size, though, so I would include that part in your calculations.

对于这种情况，您可以为不同的屏幕大小配置最大高度，并保留溢出:auto针对不同的屏幕大小。你必须确保模态页眉，页脚和正文的总和不会超过屏幕的大小，所以我将在你的计算中包含这一部分。

#5

Set height for modal-body and not for the whole modal to get a perfect scroll on modal overlay. I get it work like this:

为模态体设置高度，而不是为整个模态设置高度，以便在模态叠加上获得完美的滚动。我这样做:

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

Here you can set height as per your requirements.

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

#6

This is how I did it purely with CSS overriding some classes:

这就是我用CSS重写类的方法:

.modal {
  height: 60%;

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

Hope it helps you.

希望它能帮助你。

#7

When using Bootstrap modal with skrollr, the modal will become not scrollable.

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

Problem fixed with stop the touch event from propagating.

修正了停止触摸事件传播的问题。

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

more details at Add scroll event to the element inside #skrollr-body

在#skrollr-body中向元素添加滚动事件的更多细节

#8

Actually for Bootstrap 3 you also need to override the .modal-open class on body.

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

#9

I'm having this issue on Mobile Safari on my iPhone6

我在iPhone6的手机Safari浏览器上有这个问题

Bootstrap adds the class .modal-open to the body when a modal is opened.

当打开模式时，Bootstrap向主体添加.modal-open类。

I've tried to make minimal overrides to Bootstrap 3.2.0, and came up with the following:

我尝试过对Bootstrap 3.2.0进行最少的重写，得出了以下结论:

.modal-open {
    position: fixed;
}

.modal {
    overflow-y: auto;
}

For comparison, I've included the associated Bootstrap styles below.

为了进行比较，我在下面包含了相关的引导样式。

Selected extract from bootstrap/less/modals.less (don't include this in your fix):

选择从引导/不/情态动词。更少(在你的修复中不包括这个):

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

Mobile Safari version used: 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

移动Safari版本使用:用户代理Mozilla/5.0 (iPhone;CPU iPhone OS 8_1，如Mac OS X) AppleWebKit/600.1.4 (KHTML，如Gecko)版本/8.0 Mobile/12B411 Safari/600.1.4

#10

I had the same issue, and found a fix as below:

我遇到了同样的问题，找到了如下的解决办法:

$('.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% working.

100%的工作。

#11

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

it's works for me

这对我的作品

#12

After using all these mentioned solution, i was still not able to scroll using mouse scroll, keyboard up/down button were working for scrolling content.

在使用了所有这些解决方案之后，我仍然不能使用鼠标滚动，键盘上的上/下按钮可以滚动内容。

So i have added below css fixes to make it working

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

.modal-open {
    overflow: hidden;
}

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

Added pointer-events: auto; to make it mouse scrollable.

添加pointer-events:汽车;使其可滚动。

#13

I was able to overcome this by using the "vh" metric with max-height on the .modal-body element. 70vh looked about right for my uses.

我通过在。modal-body元素上使用最大高度的“vh”度量来克服这个问题。70vh看起来很适合我的用途。

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

#14

Bootstrap will add or remove a css "modal-open" to the <body> tag when we open or close a modal. So if you open multiple modal and then close arbitrary one, the modal-open css will be removed from the body tag.

当我们打开或关闭一个模态时，Bootstrap将向标签添加或移除css“modal-open”。所以如果你打开多个模态，然后关闭任意一个模态，模式打开的css将从body标签中移除。

But the scroll effect depend on the attribute "overflow-y: auto;" defined in modal-open

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

#15

-2

Solution 1: You can declare .modal{ overflow-y:auto} or .modal-open .modal{ overflow-y:auto} if you are using below 3v of bootstrap (for upper versions it is already declared).

解决方案1:如果使用低于3v的bootstrap，可以声明.modal{overflow-y:auto}或.modal-open .modal{overflow-y:auto}(对于上部版本，它已经声明)。

Bootstrap adds modal-open class to body in order to remove scrollbars in case modal is shown, but does not add any class to html which also can have scrollbars, as a result the scrollbar of html sometimes can be visible too, to remove it you have to set modal show/hide events and add/remove overflow:hidden on html. Here how to do this.

引导增加modal-open类身体为了消除滚动条显示模态,但不添加任何html类也可以有滚动条,结果html的滚动条有时也可以是可见的,删除它,你必须设置模态显示/隐藏事件和添加/删除溢出:隐藏在html。这里是怎么做的。

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

Solution 2: As modal has functionality keys, the best way to handle this is to fix height of or even better connect the height of modal with height of the viewport like this -

解决方案2:由于模态有功能键，最好的处理方法是固定模态的高度，甚至更好地将模态的高度与视口的高度联系起来

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

With this method you also do not have to handle body and html scrollbars.

使用此方法，您也不必处理主体和html滚动条。

Note 1: Browser support for vh units.

注1:对vh单元的浏览器支持。

Note 2: As it is proposed above. If you change .modal{position:fixed} to .modal{position:absolute}, but in case page has more height than modal user can scroll too much up and modal will disappear from viewport, this is not good for user experience.

注2:如上所述。如果你将.modal{position:fixed}改为.modal{position:absolute}，但是如果页面的高度超过了mode用户可以滚动的高度，mode就会从viewport中消失，这对用户体验是不利的。

#1