加载 twitter 引导模式对话框时，如何防止正文滚动条和移位？
Posted
技术标签:
【中文标题】加载 twitter 引导模式对话框时，如何防止正文滚动条和移位？【英文标题】：How can I prevent body scrollbar and shifting when twitter bootstrap modal dialog is loaded? 【发布时间】：2013-10-17 18:53:12 【问题描述】：当我打开 twitter 引导模式对话框时，背景会导致滚动条并移动内容。
为了避免滚动条，我使用了这个 css：
.modal
overflow: hidden;
但我无法避免这种转变。
问候， 马尔科
我正在使用 Bootstrap 第 3 版
【问题讨论】：
是的，我也遇到了同样的问题，你需要为背景设置溢出：隐藏 这个我试过了，但问题依然存在：.modal-backdrop overflow:hidden; 【参考方案1】：试试这个
body.modal-open
overflow: auto;
【讨论】：
【参考方案2】：马尔科，
我也遇到了同样的问题。当模态首次显示时，Bootstrap 3.0.0 似乎向<body>、modal-open 添加了一个类。此类将margin-right: 15px 添加到正文中以说明滚动条，该滚动条位于较长的页面上。这很好，除了滚动条不在正文上时的较短页面。在没有滚动条的情况下，margin-right 会导致主体在模态打开时向左移动。
我可以通过添加一些简短的 javascript 和一些 CSS 来解决这个问题：
CSS：
/* override bootstrap 3 class to remove scrollbar from modal backdrop
when not necessary */
.modal
overflow-y: auto;
/* custom class to override .modal-open */
.modal-noscrollbar
margin-right: 0 !important;
JS：
(function($)
$(document)
.on( 'hidden.bs.modal', '.modal', function()
$(document.body).removeClass( 'modal-noscrollbar' );
)
.on( 'show.bs.modal', '.modal', function()
// Bootstrap adds margin-right: 15px to the body to account for a
// scrollbar, but this causes a "shift" when the document isn't tall
// enough to need a scrollbar; therefore, we disable the margin-right
// when it isn't needed.
if ( $(window).height() >= $(document).height() )
$(document.body).addClass( 'modal-noscrollbar' );
);
)(window.jQuery);
这些组合允许margin-right 滚动条修复适用于长页面，但对于较短的页面禁用（当文档高度
Bootstrap 3.0.1+（测试到 3.1.1）是另一回事。请尝试以下操作：
CSS：
/* override bootstrap 3 class to remove scrollbar from modal backdrop
when not necessary */
.modal
overflow-y: auto;
/* custom class to add space for scrollbar */
.modal-scrollbar
margin-right: 15px;
JS：
(function($)
$(document)
.on( 'hidden.bs.modal', '.modal', function()
$(document.body).removeClass( 'modal-scrollbar' );
)
.on( 'show.bs.modal', '.modal', function()
// Bootstrap's .modal-open class hides any scrollbar on the body,
// so if there IS a scrollbar on the body at modal open time, then
// add a right margin to take its place.
if ( $(window).height() < $(document).height() )
$(document.body).addClass( 'modal-scrollbar' );
);
)(window.jQuery);
编辑：
鉴于 Mac 消除了占据窗口渲染宽度的滚动条，如果您不介意某些功能检测，这里有一个更便携的解决方案 (3.0.1+)。参考：http://davidwalsh.name/detect-scrollbar-width
CSS：
.scrollbar-measure
height: 100px;
overflow: scroll;
position: absolute;
top: -9999px;
JS：
window.jQuery(function()
// detect browser scroll bar width
var scrollDiv = $('<div class="scrollbar-measure"></div>')
.appendTo(document.body)[0],
scrollBarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
$(document)
.on('hidden.bs.modal', '.modal', function(evt)
// use margin-right 0 for IE8
$(document.body).css('margin-right', '');
)
.on('show.bs.modal', '.modal', function()
// When modal is shown, scrollbar on body disappears. In order not
// to experience a "shifting" effect, replace the scrollbar width
// with a right-margin on the body.
if ($(window).height() < $(document).height())
$(document.body).css('margin-right', scrollBarWidth + 'px');
);
);
【讨论】：
您好，我已经尝试过您的解决方案。这些类已添加到 body 元素中，但滚动条已经存在。 Bootstrap 3.0.2 版本解决了移位问题。 Marko，不知怎的，我完全错过了你的评论。感谢更新，我去看看最新的 Bootstrap。 “文档高度与窗口高度”的检查似乎相反？当我用小于或等于替换大于或等于时，此解决方案对我有用 有趣...我又看了一遍，确定了 3.0.0 和 3.0.1+ 之间的区别（上面编辑过）。我在这种情况下使用了小于，但也更改了 CSS。 我无法再访问原始源代码（存在问题的地方）。但我已经对其进行了测试，它似乎可以按预期工作。谢谢【参考方案3】：最好的办法是：
添加到 BODY 溢出-y：滚动 并从 bootstrap.js 中删除 4 个函数：checkScrollbar、setScrollbar、resetScrollbar 和 measureScrollbar。
【讨论】：
【参考方案4】：我的很简单（仅限 CSS）：
body
padding-right:0px !important;
margin-right:0px !important;
事实上 !important 是通过改变 padding 和 margin 与 modal-open 类和样式重叠引导。
【讨论】：
这对我有用。不幸的是，这应该在 3.0.2 中修复，但问题仍然存在于 3.3.2 中。 Bingo - 这是唯一适合我的解决方案。谢谢！ body class应用于哪个dom元素？【参考方案5】：对我来说，只有两个答案的组合有效。
css：
body
padding-right:0px !important;
margin-right:0px !important;
body.modal-open
overflow: auto;
手写笔：
body
padding-right:0px !important
margin-right:0px !important
&.modal-open
overflow: auto
【讨论】：
谢谢，谢谢！这应该被接受的答案。我正在使用引导程序 3.3.5 这里有一个更好的解决方案，稍作修改... body.modal-open overflow-y: auto;溢出-x：隐藏； 也适用于 3.3.6。非常感谢！！ 拯救了我的夜晚！谢谢！对于 3.3.7。【参考方案6】：body
/*prevent modal background jumping*/
padding-right:0px !important;
margin-right:0px !important;
/*prevent modal background jumping*/
body.modal-open
overflow: auto;
【讨论】：
【参考方案7】：我遇到了同样的问题，滚动条消失了，当打开引导模式时，身体向左移动。
我发现了一个简单的解决方法：
.modal
overflow-y: auto !important;
.modal-open
overflow:auto !important;
overflow-x:hidden !important;
padding-right: 0 !important;
祝大家好运！
【讨论】：
【参考方案8】：我将此添加到我的 CSS 中，并且在添加“固定”叠加层以查看时似乎可以正常工作
.modal-open
margin-right: 15px;
【讨论】：
【参考方案9】：试试这个简单的javascript：
$j(document).ready(function()
if ($(document).height() <= $(window).height())
$('body').css('margin-right','0','!important');
);
【讨论】：
请在您的回答中添加一些解释。【参考方案10】：你应该试试这个。这工作正常。
$j(document).ready(function()
$('.modal').on('show.bs.modal', function ()
if ($(document).height() <= $(window).height())
$('body').css('margin-right','0','!important');
else
$('body').removeAttr('style');
)
$('.modal').on('hide.bs.modal', function ()
$('body').removeAttr('style');
)
)
【讨论】：
【参考方案11】：我的 .css 文件中包含以下内容，修复了我的居中内容页面在弹出模式显示时无法移动或调整大小。
我不需要任何 Javascript，只需要下面的 css 代码。这修复了带有或不带有垂直或水平滚动条的内容。
.modal
overflow-y: auto !important;
.modal-open
overflow: auto !important;
overflow-x: hidden !important;
padding-right: 15px !important;
我正在使用引导程序 3.3.7。
【讨论】：
以上是关于加载 twitter 引导模式对话框时，如何防止正文滚动条和移位？的主要内容，如果未能解决你的问题，请参考以下文章