Bootstrap 3模态触发并导致页面暂时向左移动/浏览器滚动条问题 [英] Bootstrap 3 modal fires and causes page to shift to the left momentarily / browser scroll bar problems

问题描述

我正在使用Bootstrap 3.1.0在网站上工作。

I am working on a site using Bootstrap 3.1.0.

当模态窗口打开时，浏览器滚动条会暂时消失然后回来。它关闭它时也是如此。

You'll notice when the modal window opens, the browser scroll bar just disappears for a split second, then comes back. It does the same when you close it.

我怎样才能让它在没有浏览器滚动条交互的情况下打开和关闭。我已经在堆栈中看到有人遇到问题的帖子，但是我找不到具体针对我的问题的答案，因此如果其他人提出了此请求并且有人知道并希望将其链接到该问题，我将非常感激它。我在搜索了2个小时之后才发布。

How can I make it so that it just open and closes with no browser scroll bar interaction. I have seen posts on stack where people were having problems, but I can't find an answer specific to my problem, so if someone else has made this request and someone knows about it and wants to link me to it, I'd appreciate it. I've searched for about 2 hours for this before posting up.

推荐答案

这是我在github中发现的，当我搜索这个问题，对我来说，它工作正常

this is what i found in github when i search about this problem and for me it works fine

js：
$ b

js:

    $(document).ready(function () {
    $('.modal').on('show.bs.modal', function () {
        if ($(document).height() > $(window).height()) {
            // no-scroll
            $('body').addClass("modal-open-noscroll");
        }
        else {
            $('body').removeClass("modal-open-noscroll");
        }
    });
    $('.modal').on('hide.bs.modal', function () {
        $('body').removeClass("modal-open-noscroll");
    });
})

css 如果你有这个css nav-fixed-top 和 navbar-fixed-bottom ：

css use this css if you have nav-fixed-top and navbar-fixed-bottom:

body.modal-open-noscroll
{
    margin-right: 0!important;
    overflow: hidden;
}
.modal-open-noscroll .navbar-fixed-top, .modal-open .navbar-fixed-bottom
{
    margin-right: 0!important;
}

或者如果您拥有navbar-default

or user this css if you have navbar-default

body.modal-open-noscroll 
{
  margin-right: 0!important;
  overflow: hidden;
}
.modal-open-noscroll .navbar-default, .modal-open .navbar-default 
{
  margin-right: 0!important;
}

这篇关于Bootstrap 3模态触发并导致页面暂时向左移动/浏览器滚动条问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！