Bootstrap 3模式启动并导致页面暂时向左移动/浏览器滚动条问题

78

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

您会注意到，当模式窗口打开时，浏览器滚动条会消失片刻，然后返回。关闭它时，它的作用相同。

我如何才能使其打开和关闭而没有浏览器滚动条交互。我曾在堆栈上看到有人遇到问题的帖子，但找不到针对我的问题的答案，因此，如果有人提出了此请求，并且有人知道此请求并希望将我链接到该请求，我将不胜感激它。发布前，我已经搜索了大约2个小时。

html  twitter-bootstrap  responsive-design  twitter-bootstrap-3 
— 丹尼尔·怀特
source
显然，此问题已在Bootstrap的3.2.0版本中修复。
— devius
3
显然不是（2016年）。未来的读者应按投票对答案进行排序，因为公认的答案不是最佳答案。见这个答案可能还有这一个
— cssyphus
3.3.6仍未修复，因此感谢@gibberish的注意！
— arjs
在2017
— 。– lowtechsun

Answers:

22

这是我在github上搜索此问题时发现的内容，对我来说效果很好

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

如果您拥有nav-fixed-top和navbar-fixed-bottom，css将使用此css ：

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，请使用此CSS

body.modal-open-noscroll 
{
  margin-right: 0!important;
  overflow: hidden;
}
.modal-open-noscroll .navbar-default, .modal-open .navbar-default 
{
  margin-right: 0!important;
}
— 用户名
source
4
为我工作，但我不得不将右边距权利更改为padding-right
— GhostRider 2015年
@GhostRider：谢谢。我不得不碰到填充的余量。
— 布赖恩·凯茨
再加上一个用于固定顶部/固定底部的解决方案，其他任何答案都不适用于这种情况。
— 蒂诺·麦克拉伦
1
下面的@FutureReaders ben.kaminski的答案具有单行CSS解决方案，应该是被接受的答案。
— cssyphus
92 
.modal {
 overflow-y: auto;
}

.modal-open {
 overflow: auto;
}

将摆脱它。添加此选项是为了使模态响应更快，因此如果屏幕太短，您可以向下滚动并查看模态。当模式启动时，它还阻止背景滚动。如果您不需要该功能，则可以使用我发布的CSS。

更多信息：它们在主体上设置.modal-open，以防止在主体上进行所有滚动并隐藏主体滚动条。然后，当模式出现时，它具有占据整个屏幕的深色背景，并且具有y溢出：滚动，这将迫使滚动条返回，因此，如果模式扩展通过了屏幕的底部，您仍然可以滚动黑暗的背景，看看其余的。

— cjd82187
source
11
您可能希望仅在台式机的媒体查询中包含该CSS，因此在移动时具有更好的boostrap 3样式。
— cjd82187
1
该页面现在不会向左移动，但是现在我们有了更多垂直滚动条！！！
— Laxman 2014年
1
可以，但是添加了第二个滚动条。
— emzero 2014年
完善。快捷方便。谢谢
— coggicc
2
还要添加padding，.modal-open { overflow: auto; padding-right: 0px !important; }如@ ben.kaminski所说，这完全摆脱了左移问题。希望会有所帮助。
— shaijut
74

单独使用CSS即可轻松解决左移问题。

.modal-open[style] {
padding-right: 0px !important;
}

您只是覆盖了代码中存在的内联样式。我在WordPress版本中使用我的浏览器，并且将内联样式应用于主体。看起来像这样：

<body class="home blog logged-in modal-open" style="padding-right: 15px;">

希望这对某人有帮助！

— 本·卡明斯基
source
我在IE中也遇到了同样的问题。它将添加右填充样式。这可能是因为我强制使用垂直滚动条。无论如何，此修复它，谢谢！
— slopapa 2014年
谢谢本-这对我也有帮助！
— DaniB
6
这与上面的overflow：auto fix结合在一起对我有用。
— DPac
2
2016年就可以了（当您还考虑到溢出时。）非常感谢！
— arjs
1
这应该是2020年接受的答案。谢谢！
— 尼克·范·布伦特
39 
.modal {
    overflow-y: auto;
}

.modal-open {
    overflow: auto;
}

.modal-open[style] {
    padding-right: 0px !important;
}

感谢Ben和CJD。

上面的代码似乎对我有用。

— 托尼·S
source
我认为这不是一个实际的答案，所以您发布了，因为您还不能发表评论。但是请耐心等待。
— CemÖzer2015年
在2016年为我工作！谢谢
— GhostRider '16
2017年和Bootstrap 4的轻微变化仍然存在模态。这仍然可以解决问题，谢谢！
— DaveK '17
使用引导程序4.2.1时，此问题仍然存在，此问题已解决。谢谢！
— wasp8898
8

这是引导的报告问题：https : //github.com/twbs/bootstrap/issues/9855

这是我的临时快速修复，也可以使用固定顶部导航栏（仅使用javascript）工作。将此脚本与页面一起加载。

$(document.body)
.on('show.bs.modal', function () {
    if (this.clientHeight <= window.innerHeight) {
        return;
    }
    // Get scrollbar width
    var scrollbarWidth = getScrollBarWidth()
    if (scrollbarWidth) {
        $(document.body).css('padding-right', scrollbarWidth);
        $('.navbar-fixed-top').css('padding-right', scrollbarWidth);    
    }
})
.on('hidden.bs.modal', function () {
    $(document.body).css('padding-right', 0);
    $('.navbar-fixed-top').css('padding-right', 0);
});

function getScrollBarWidth () {
    var inner = document.createElement('p');
    inner.style.width = "100%";
    inner.style.height = "200px";

    var outer = document.createElement('div');
    outer.style.position = "absolute";
    outer.style.top = "0px";
    outer.style.left = "0px";
    outer.style.visibility = "hidden";
    outer.style.width = "200px";
    outer.style.height = "150px";
    outer.style.overflow = "hidden";
    outer.appendChild (inner);

    document.body.appendChild (outer);
    var w1 = inner.offsetWidth;
    outer.style.overflow = 'scroll';
    var w2 = inner.offsetWidth;
    if (w1 == w2) w2 = outer.clientWidth;

    document.body.removeChild (outer);

    return (w1 - w2);
};

这是工作示例：http : //jsbin.com/oHiPIJi/64

— 阿格尼·普拉达玛（Agni Pradharma）
source
在最新版本的Bootstrap上运行正常，并在最新版本的Chrome，Firefox和Opera中进行了测试。没用Safari或IE看看。
— lowtechsun
正是我所需要的。那个和这个： .modal { overflow: auto; } .modal-open { overflow: auto; } .modal-open[style] { padding-right: 0px !important; } 我正试图从另一个模式中触发一种模式，并且转换倍增。感谢您的提示。
— Aelys
7

如果您已固定导航栏，并且不想在打开模式对话框时将正文滚动到顶部，请使用此样式

.modal-open {
    overflow: visible;
}
.modal-open, .modal-open .navbar-fixed-top, .modal-open .navbar-fixed-bottom {
    padding-right:0px!important;
}
— 卡尔文谷物
source
7

此页面上的所有项目都不适用于3.3.4和3.3.5版本，添加此CSS可以为我解决问题。

body {
padding-right:0px !important;
margin-right:0px !important;
}
— 头晕
source
5

解决导致页面向右移动的问题

html, body{
  padding: 0 !important;
}
展开摘要

— 菲米克·安东尼
source
好吧，这段代码实际上什么也没显示。添加一些彩色块以显示所提供内容的效果。
— Al.G.
这是对我有用的-并非其他overflow-y:auto答复。
— 基因b。
也为我工作。其他解决方案则没有。
— 比利·雷·瓦伦丁
4 
$('body').on('show.bs.modal', function () {
    if ($("body").innerHeight() > $(window).height()) {
        $("body").css("margin-right", "17px");
    }
}); 

$('body').on('hidden.bs.modal', function (e) {
    $("body").css("margin-right", "0px");
});

显示模式时，此小技巧模拟了滚动条，为主体添加了一个边距右。

— hect0r90
source
1
右边距不应该具有固定的像素值，因为滚动条的宽度随浏览器的不同而不同。
— lowtechsun
滚动条的宽度也会根据浏览器的缩放而变化。应结合使用这个脚本就像一个滚动条大小检测脚本本
— 注：Kunal
4

以上所有方法均无效，其他时间也无法进行研究。但是下面的代码只需要一点CSS就可以完美地工作。以上内容不会删除内联样式填充：17px；使用JS或jquery，我可以添加0填充，但是没有效果。

.modal-open {
  padding-right: 0px !important;
  overflow-y: scroll;
  width: 100%;
  display: block;
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1050;
  display: none;
  width: 100%;
  height: 100%;
  outline: 0;
  padding-right: 0 !important;
}
— 科里B
source
这使带有滚动条的页面在打开模式时具有第二个滚动条。如果在打开的模态上有第二个模态，则在关闭第二个模态后，第一个模态的滚动条将丢失。
— Lacek
3 

html, body{
    padding-right: 0px !important; 
    position: relative!important;
}
展开摘要

试试这个代码，实际上是可行的

— 野兽
source
尽管这不是解决问题的最美丽方法，但它确实有效
— Sander Van Keer
只是为了解决一个模态问题，需要调整我的身体样式，这可能会干扰许多其他事情，但是这对我
— 有用
3

我在Bootstrap 4中遇到了这个问题。我也html { overflow-y: scroll; }遇到了问题，但是将其添加.modal-open[style] { padding-right: 0px !important; }到本地CSS文件后，一切正常！

.modal-open[style] { 
    padding-right: 0px !important; 
}
展开摘要

— 塞尔多97
source
对我来说非常完美，谢谢:)顺便说一句：您也可以使用padding-right: 0;代替，padding-right: 0px以实现最大效率
— janisch
2

在我的情况下，body标签已经指定了overflow:hidden。

当模式对话框打开时，它也会添加padding-right:17px;到主体中。

我的代码在这里

.modal-open {
  overflow: hidden!important;
  padding-right:0!important
}
— 凯杰
source
1

从Bootstrap 3.3.2开始，行为似乎是在显示对话框时删除了滚动条，并且Bootstrap在body元素上添加了一些右填充以补偿以前由滚动条占用的空间。不幸的是，这至少在现代版本的Chrome，IE，Firefox或Safari中并不能防止屏幕移位。此处没有任何修复程序可以完全解决此问题，但是将ben.kaminski的答案与cjd82187的部分答案结合起来，仅使用CSS即可解决该问题：

/* removes inline padding added by Boostrap that makes the screen shift left */
.modal-open[style] {
    padding-right: 0px !important;
}

/* keeps Bootstrap from removing the scrollbar if it's there */
.modal-open {
    overflow: auto;
}

正如ben.kaminski所提到的，该代码已添加到Twitter Bootstrap中，因此，如果超出屏幕底部，您可以滚动查看该模式。要保留该功能，您可以将CSS解决方案包装在媒体查询中，使其仅适用于大型视口，如下所示：

@media (min-width: 992px) {         
    .modal-open[style] {
        padding-right: 0px !important;
    }

    .modal-open {
        overflow: auto;
    }   
}
— 克拉夫
source
1

对于Bootstrap-4.3.x，请使用以下CSS：

.modal-open {
    padding-right: 0 !important;
}

/* if you have .navbar in your page then add padding-right for your .navbar (default is 16px) */
.modal-open .navbar {
    padding-right: 16px !important;
}

而已。不需要其他任何东西，例如：JavaScript代码，.class在您的代码中添加一些代码body，然后添加CSS代码来设置样式。

— Partho63
source
0

我的页面需要Agni Pradharma代码的修改版本，以防止显示模态时代码发生变化。我有一个固定的导航标题，有些页面带有滚动，有些没有。此处的演示：http : //jsbin.com/gekenakoki/1/

我同时使用了两个CSS：

.modal {
    overflow-y: auto;
}

.modal-open {
    overflow: auto;
}

和脚本：

$(document.body)
.on('show.bs.modal', function () {
    if (this.clientHeight <= window.innerHeight) {
        return;
    }
    // Get scrollbar width
    var scrollbarWidth = getScrollBarWidth();
    if (scrollbarWidth) {
        $(document.body).css('padding-left', scrollbarWidth); 
    }
})
.on('hidden.bs.modal', function () {
    $(document.body).css('padding-left', 0);
});

function getScrollBarWidth () {
    var inner = document.createElement('p');
    inner.style.width = "100%";
    inner.style.height = "200px";

    var outer = document.createElement('div');
    outer.style.position = "absolute";
    outer.style.top = "0px";
    outer.style.left = "0px";
    outer.style.visibility = "hidden";
    outer.style.width = "200px";
    outer.style.height = "150px";
    outer.style.overflow = "hidden";
    outer.appendChild (inner);

    document.body.appendChild (outer);
    var w1 = inner.offsetWidth;
    outer.style.overflow = 'scroll';
    var w2 = inner.offsetWidth;
    if (w1 == w2) w2 = outer.clientWidth;

    document.body.removeChild (outer);

    return (w1 - w2);
};
— 骑士
source
这是行不通的。更改小提琴以触发垂直滚动，并且仍会出现偏移。
— Archimedes Trajano
0

如果有人碰巧正在使用react-bootstrap该解决方案，则要复杂一点，因为react-bootstrap将内联样式应用于body元素以操纵overflow和padding样式。这意味着您必须使用!important

body.modal-open {
  // enable below if you want to additionally allow scrolling with the modal displayed
  // overflow: auto !important;

  // prevent the additional padding from being applied
  padding: 0 !important;
}

注意：如果未通过取消注释overflow样式来启用滚动（即，使滚动条可见），则页面内容将显示为通过滚动条宽度移动（如果以前是可见的，则为滚动条）。

— js
source
0

我的Jquery解决方案：

var nb = $('nav.navbar-fixed-top');
$('.modal')
    .on('show.bs.modal', function () {
        nb.width(nb.width());
    })
    .on('hidden.bs.modal', function () {
        nb.width(nb.width('auto'));
    });
— Goloveichuk
source
0

对于Bootstrap版本3.2.0，css文件填充中的此行修复了以下错误：

.modal-open .navbar-fixed-top,
.modal-open .navbar-fixed-bottom {
padding-right: 17px;
}

解决方案在这里找到

— 西奥·孤儿
source
0

对我来说最好的解决方案是使用此设置。它适用于网络和移动

.modal-open {
   overflow: hidden;
   position: absolute;
   width: 100%;
   height: 100%;
}
— 巴坦多
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.