打开模式时防止滚动
当我的网站上的Modal（来自http://twitter.github.com/bootstrap ）打开时，我希望我的身体在使用鼠标滚轮时停止滚动。
当模式被打开但是没有成功的时候，我试图调用下面的那段javascript
$(window).scroll(function() { return false; }); AND $(window).live('scroll', function() { return false; }); 请注意我们的网站放弃了对IE6的支持，但IE7需要兼容。
Bootstrap的modal modal-open在modal dialog显示时自动将modal-open的类添加到主体，并在隐藏对话框时将其删除。 因此，您可以将以下内容添加到您的CSS：
body.modal-open { overflow: hidden; }
你可以争辩说，上面的代码属于引导CSS代码库，但这是一个简单的修复，将其添加到您的网站。
更新2013年8月2日
现在已经停止在Twitter Boostrap v。2.3.0中工作 – 他们不再将modal-open类添加到正文中。
解决方法是在模态即将显示时将该类添加到主体中，并在模式closures时将其删除：
$("#myModal").on("show", function () { $("body").addClass("modal-open"); }).on("hidden", function () { $("body").removeClass("modal-open") });
更新2013年3月11日看起来像modal-open课将在Bootstrap 3.0中返回，明确为了防止滚动的目的：
在身体上重新引入.modal-open（所以我们可以在那里核对卷轴）
看到这个： https ： //github.com/twitter/bootstrap/pull/6342 – 看看莫代尔部分。
被接受的答案在手机上不起作用（至less在Safari 7上是iOS 7），而且我不想在CSS上运行MOAR JavaScript。
这个CSS将防止背景页面在模式下滚动：
body.modal-open { overflow: hidden; position: fixed; }
不过，它也有轻微的副作用，基本上滚动到顶部。 position:absolute解决了这个问题，但重新介绍了在移动设备上滚动的function。
如果你知道你的视口（ 我的插件添加视口到<body> ），你可以添加一个css的position切换。
body.modal-open { // block scroll for mobile; // causes underlying page to jump to top; // prevents scrolling on all screens overflow: hidden; position: fixed; } body.viewport-lg { // block scroll for desktop; // will not jump to top; // will not prevent scroll on mobile position: absolute; }
我也添加这个来防止底层页面在显示/隐藏模式时左/右跳跃。
body { // STOP MOVING AROUND! overflow-x: hidden; overflow-y: scroll !important; }
这个答案是x-post。
只是隐藏身体溢出，它使身体不滚动。 隐藏模式时，将其恢复为自动。
这里是代码：
$('#adminModal').modal().on('shown', function(){ $('body').css('overflow', 'hidden'); }).on('hidden', function(){ $('body').css('overflow', 'auto'); })
你可以尝试设置正文大小与溢出窗口大小：模式打开时隐藏
警告：以下选项与Bootstrap v3.0.x无关，因为在这些版本中的滚动已经明确限制在模态本身。 如果禁用轮子事件，则可能无意中阻止某些用户查看高度大于视口高度的模式中的内容。
另一个select：车轮事件
滚动事件不可取消。 但是可以取消鼠标滚轮和滚轮事件。 值得注意的是，并不是所有的传统浏览器都支持它们，Mozilla最近才在Gecko 17.0中join了对后者的支持。 我不知道全部传播，但IE6 +和Chrome支持它们。
以下是如何利用它们：
$('#myModal') .on('shown', function () { $('body').on('wheel.modal mousewheel.modal', function () { return false; }); }) .on('hidden', function () { $('body').off('wheel.modal mousewheel.modal'); });
的jsfiddle
你需要超越@ charlietfl的答案并考虑滚动条，否则你可能会看到文档重排。
打开模式：
- logging
body宽度 - 将
body溢出设置为hidden - 显式设置身体宽度到它在步骤1中的内容。
var $body = $(document.body); var oldWidth = $body.innerWidth(); $body.css("overflow", "hidden"); $body.width(oldWidth);
closures模式：
- 将
body溢出设置为auto - 将
body宽度设置为auto
var $body = $(document.body); $body.css("overflow", "auto"); $body.width("auto");
启发： http : //jdsharp.us/jQuery/minute/calculate-scrollbar-width.php
/* ============================= * Disable / Enable Page Scroll * when Bootstrap Modals are * shown / hidden * ============================= */ function preventDefault(e) { e = e || window.event; if (e.preventDefault) e.preventDefault(); e.returnValue = false; } function theMouseWheel(e) { preventDefault(e); } function disable_scroll() { if (window.addEventListener) { window.addEventListener('DOMMouseScroll', theMouseWheel, false); } window.onmousewheel = document.onmousewheel = theMouseWheel; } function enable_scroll() { if (window.removeEventListener) { window.removeEventListener('DOMMouseScroll', theMouseWheel, false); } window.onmousewheel = document.onmousewheel = null; } $(function () { // disable page scrolling when modal is shown $(".modal").on('show', function () { disable_scroll(); }); // enable page scrolling when modal is hidden $(".modal").on('hide', function () { enable_scroll(); }); });
我不确定这个代码，但是值得一试。
在jQuery中：
$(document).ready(function() { $(/* Put in your "onModalDisplay" here */)./* whatever */(function() { $("#Modal").css("overflow", "hidden"); }); });
正如我之前所说，我不是100％确定，但无论如何尝试。
无法通过更改CSS来使其在Chrome上工作，因为我不希望页面滚动回顶部。 这工作得很好：
$("#myModal").on("show.bs.modal", function () { var top = $("body").scrollTop(); $("body").css('position','fixed').css('overflow','hidden').css('top',-top).css('width','100%').css('height',top+5000); }).on("hide.bs.modal", function () { var top = $("body").position().top; $("body").css('position','relative').css('overflow','auto').css('top',0).scrollTop(-top); });
试试这个：
.modal-open { overflow: hidden; position:fixed; width: 100%; height: 100%; }
它为我工作。 （支持IE8）
你可以使用下面的逻辑，我testing它，它可以工作（即使在IE中）
<html> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script type="text/javascript"> var currentScroll=0; function lockscroll(){ $(window).scrollTop(currentScroll); } $(function(){ $('#locker').click(function(){ currentScroll=$(window).scrollTop(); $(window).bind('scroll',lockscroll); }) $('#unlocker').click(function(){ currentScroll=$(window).scrollTop(); $(window).unbind('scroll'); }) }) </script> <div> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <button id="locker">lock</button> <button id="unlocker">unlock</button> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> </div>
最好的解决scheme是这些答案中大部分使用的CSS唯一的body{overflow:hidden}解决scheme。 一些答案提供了一个修复，也可以防止消失滚动条引起的“跳跃” 然而，没有一个太优雅。 所以，我写了这两个函数，他们似乎工作得很好。
var $body = $(window.document.body); function bodyFreezeScroll() { var bodyWidth = $body.innerWidth(); $body.css('overflow', 'hidden'); $body.css('marginRight', ($body.css('marginRight') ? '+=' : '') + ($body.innerWidth() - bodyWidth)) } function bodyUnfreezeScroll() { var bodyWidth = $body.innerWidth(); $body.css('marginRight', '-=' + (bodyWidth - $body.innerWidth())) $body.css('overflow', 'auto'); }
看看这个jsFiddle看到它在使用中。
基于这个小提琴： http : //jsfiddle.net/dh834zgw/1/
以下片段（使用jquery）将禁用窗口滚动：
var curScrollTop = $(window).scrollTop(); $('html').toggleClass('noscroll').css('top', '-' + curScrollTop + 'px');
并在您的CSS：
html.noscroll{ position: fixed; width: 100%; top:0; left: 0; height: 100%; overflow-y: scroll !important; z-index: 10; }
现在，当您删除模式时，不要忘记删除html标签上的noscroll类：
$('html').toggleClass('noscroll');
添加类'is-modal-open'或者使用javascript修改body标签的样式是可以的，它将按照预期工作。 但是我们要面对的问题是当身体变得溢出时：隐藏，它会跳到顶部，（scrollTop将变成0）。 这将在稍后成为可用性问题。
作为这个问题的解决scheme，而不是改变身体标记溢出：隐藏改变它在html标记
$('#myModal').on('shown.bs.modal', function () { $('html').css('overflow','hidden'); }).on('hidden.bs.modal', function() { $('html').css('overflow','auto'); });
可悲的是上面的答案都没有解决我的问题。
在我的情况下，网页最初有一个滚动条。 每当我点击模式，滚动条不会消失，头将向右移动一点。
然后我试着添加.modal-open{overflow:auto;} （大多数人推荐）。 它确实解决了这个问题：打开模式后出现滚动条。 然而，另一个副作用出来，这是“标题下方的背景会左移一点，连同模态背后的另一个长条”
幸运的是，在我添加{padding-right: 0 !important;} ，所有东西都完美地被修复了。 标题和正文背景都没有移动，模态仍然保持滚动条。
希望这可以帮助那些仍然坚持这个问题的人。 祝你好运！
大部分是在这里，但我没有看到任何答案，把它放在一起。
问题是三重的。
（1）阻止底层页面的滚动
$('body').css('overflow', 'hidden')
（2）并移除滚动条
var handler = function (e) { e.preventDefault() } $('.modal').bind('mousewheel touchmove', handler)
（3）解除模态时清理
$('.modal').unbind('mousewheel touchmove', handler) $('body').css('overflow', '')
如果模式不是全屏，则将.modal绑定应用于全屏叠加。
我的Bootstrap 3的解决scheme：
.modal { overflow-y: hidden; } body.modal-open { margin-right: 0; }
因为对我来说，唯一的overflow: hidden在body.modal-open课没有阻止页面左移由于原来的margin-right: 15px 。
如果模态是100％的高度/宽度“鼠标/离开”将工作，以方便地启用/禁用滚动。 这真的为我工作：
var currentScroll=0; function lockscroll(){ $(window).scrollTop(currentScroll); } $("#myModal").mouseenter(function(){ currentScroll=$(window).scrollTop(); $(window).bind('scroll',lockscroll); }).mouseleave(function(){ currentScroll=$(window).scrollTop(); $(window).unbind('scroll',lockscroll); });
我有一个由checkbox黑客生成的边栏。 但主要的想法是保存文件scrollTop，而不是在滚动窗口期间改变它。
我只是不喜欢身体变成“溢出：隐藏”的页面跳跃。
window.addEventListener('load', function() { let prevScrollTop = 0; let isSidebarVisible = false; document.getElementById('f-overlay-chkbx').addEventListener('change', (event) => { prevScrollTop = window.pageYOffset || document.documentElement.scrollTop; isSidebarVisible = event.target.checked; window.addEventListener('scroll', (event) => { if (isSidebarVisible) { window.scrollTo(0, prevScrollTop); } }); }) });
为我工作
$('#myModal').on({'mousewheel': function(e) { if (e.target.id == 'el') return; e.preventDefault(); e.stopPropagation(); } });
当你在另一个模态中使用模态时，上述情况就会发生。 当我在另一个模态中打开一个模态时，closures后一个modal-open将从modal-open body删除类modal-open 。 问题的解决取决于你如何closures后一种模式。
如果你用html来closures模态，
<button type="button" class="btn" data-dismiss="modal">Close</button>
那么你必须添加一个这样的监听器，
$(modalSelector).on("hidden.bs.modal", function (event) { event.stopPropagation(); $("body").addClass("modal-open"); return false; });
如果你使用JavaScript来closures模态，
$(modalSelector).modal("hide");
那么你必须在这样的一段时间后运行命令，
setInterval(function(){$("body").addClass("modal-open");}, 300);
这对我工作：
$("#mymodal").mouseenter(function(){ $("body").css("overflow", "hidden"); }).mouseleave(function(){ $("body").css("overflow", "visible"); });
对于那些想知道如何获得引导3模式的滚动事件：
$(".modal").scroll(function() { console.log("scrolling!); });
这对我来说是最好的解决scheme：
CSS：
.modal { overflow-y: auto !important; }
和Js：
modalShown = function () { $('body').css('overflow', 'hidden'); }, modalHidden = function () { $('body').css('overflow', 'auto'); }
我正在使用这个香草js函数来添加“模态开放”类到身体。 （根据smhmic的回答）
function freezeScroll(show, new_width) { var innerWidth = window.innerWidth, clientWidth = document.documentElement.clientWidth, new_margin = ((show) ? (new_width + innerWidth - clientWidth) : new_width) + "px"; document.body.style.marginRight = new_margin; document.body.className = (show) ? "modal-open" : ""; };
隐藏溢出和固定的位置做的伎俩，但我的stream体devise，它会修复它的浏览器宽度，所以宽度：100％固定。
body.modal-open{overflow:hidden;position:fixed;width:100%}
试试这个代码：
$('.entry_details').dialog({ width:800, height:500, draggable: true, title: entry.short_description, closeText: "Zamknij", open: function(){ // blokowanie scrolla dla body var body_scroll = $(window).scrollTop(); $(window).on('scroll', function(){ $(document).scrollTop(body_scroll); }); }, close: function(){ $(window).off('scroll'); } });
我就是这样做的
$('body').css('overflow', 'hidden');
但是，当滚动消失它把一切权利20px，所以我补充说
$('body').css('margin-right', '20px');
紧随其后。
为我工作。
我不是100％肯定这将使用Bootstrap，但值得一试 – 它与Remodal.js可以在github上find： http ：//vodkabears.github.io/remodal/和它的方法是有意义的非常相似。
要停止页面跳转到顶部，并防止内容的右移，当模式被触发并设置这些CSS规则时，将类添加到body ：
body.with-modal { position: static; height: auto; overflow-y: hidden; }
这是position:static和height:auto ，结合停止跳跃的内容的权利。 overflow-y:hidden; 阻止页面在模式后面滚动。
您应该添加overflow: hidden在HTML中以获得更好的跨平台性能。
我会用
html.no-scroll { overflow: hidden; }
