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:

    $(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 如果您有 nav-fixed-top 和 navbar-fixed-bottom，请使用此 css:

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

或者如果你有导航栏默认使用这个 css

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屋！