How to enable scrolling content inside a Bootstrap

2019-03-08 02:54发布

站内问答 / HTML/CSS
1516 15 5

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.

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

15条回答
淡お忘
2楼-- · 2019-03-08 03:16

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

    body.modal-open, 
    .modal-open 
    .navbar-fixed-top, 
    .modal-open 
    .navbar-fixed-bottom {
     margin-right: 15px; /*<-- to margin-right: 0px;*/
    }
查看更多
0人赞 添加讨论(0) 举报
Bombasti
3楼-- · 2019-03-08 03:18

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

before (bootstrap default) :

.modal {

    overflow-y: auto;
}

after (after you edit it):

.modal {

    overflow-y: scroll;
}
查看更多
0人赞 添加讨论(0) 举报
Viruses.
4楼-- · 2019-03-08 03:21

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

查看更多
0人赞 添加讨论(0) 举报
啃猪蹄的小仙女
5楼-- · 2019-03-08 03:23

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.

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

查看更多
0人赞 添加讨论(0) 举报
不美不萌又怎样
6楼-- · 2019-03-08 03:24

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

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

查看更多
0人赞 添加讨论(0) 举报
Animai°情兽
7楼-- · 2019-03-08 03:26

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.

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.

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:

.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.

查看更多
0人赞 添加讨论(0) 举报
1 2 3 下一页
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)