打开模式时防止滚动

当我的网站上的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的答案并考虑滚动条,否则你可能会看到文档重排。

打开模式:

  1. loggingbody宽度
  2. body溢出设置为hidden
  3. 显式设置身体宽度到它在步骤1中的内容。
 var $body = $(document.body); var oldWidth = $body.innerWidth(); $body.css("overflow", "hidden"); $body.width(oldWidth); 

closures模式:

  1. body溢出设置为auto
  2. 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: hiddenbody.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:staticheight:auto ,结合停止跳跃的内容的权利。 overflow-y:hidden; 阻止页面在模式后面滚动。

您应该添加overflow: hidden在HTML中以获得更好的跨平台性能。

我会用

 html.no-scroll { overflow: hidden; }