Question

我希望我的身体在我的网站上的模态（来自http://twitter.github.com/bootstrap）打开时使用鼠标滚轮时停止滚动。

我打算在打开模态时调用下面的javascript但没有成功

$(window).scroll(function() { return false; });

AND

$(window).live('scroll', function() { return false; });

请注意我们的网站不再支持IE6，但IE7 +需要兼容。

Answer 1

Bootstrap modal会在显示模式对话框时自动将类modal-open添加到正文中，并在隐藏对话框时将其删除。因此，您可以将以下内容添加到CSS中：

body.modal-open {
    overflow: hidden;
}

你可能会争辩说上面的代码属于Bootstrap CSS代码库，但这是一个简单的解决方法，可以将它添加到你的站点。

2013年2月8日更新
这已经停止在Twitter Boostrap v.2.3.0中工作 - 他们不再将modal-open类添加到正文中。

解决方法是在将要显示模态时将类添加到正文中，并在模式关闭时将其删除：

$("#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 - 查看模态部分。

Answer 2

接受的答案并不适用于移动设备（至少iOS 7 w / Safari 7），而且我不希望CSS在我的网站上运行MOAR JavaScript。

此CSS将阻止背景页面在模式下滚动：

body.modal-open {
    overflow: hidden;
    position: fixed;
}

然而，它也有一个轻微的副作用，基本上滚动到顶部。 position:absolute解决了这个问题，但重新介绍了在移动设备上滚动的功能。

如果您知道自己的视口（my plugin for adding viewport to the <body>），则可以为position添加css切换。

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

this answer is a x-post.

Answer 3

只需隐藏身体溢出，就会使身体不滚动。隐藏模态时，将其还原为自动模式。

以下是代码：

$('#adminModal').modal().on('shown', function(){
    $('body').css('overflow', 'hidden');
}).on('hidden', function(){
    $('body').css('overflow', 'auto');
})

Answer 4

您可以尝试使用overflow设置体尺寸为窗口大小：当模态打开时隐藏

Answer 5

警告：以下选项与Bootstrap v3.0.x无关，因为这些版本中的滚动已明确局限于模式本身。如果禁用滚轮事件，可能会无意中阻止某些用户查看高度大于视口高度的模式中的内容。

又一种选择：车轮事件

滚动事件无法取消。但是，可以取消mousewheel和wheel事件。最重要的警告是，并非所有传统浏览器都支持它们，Mozilla最近才在Gecko 17.0中添加对后者的支持。我不知道完全传播，但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

Answer 6

您需要超越@ charlietfl的回答和滚动条帐户，否则您可能会看到文档重排。

打开模态：

记录body宽度
将body溢出设置为hidden

将主体宽度明确设置为步骤1中的宽度。

var $body = $(document.body);
var oldWidth = $body.innerWidth();
$body.css("overflow", "hidden");
$body.width(oldWidth);

关闭模态：

将body溢出设置为auto

将body宽度设置为auto

var $body = $(document.body);
$body.css("overflow", "auto");
$body.width("auto");

灵感来自：http://jdsharp.us/jQuery/minute/calculate-scrollbar-width.php

Answer 7

试试这个：

.modal-open {
    overflow: hidden;
    position:fixed;
    width: 100%;
    height: 100%;
}

它对我有用。（支持IE8）

Answer 8

/* =============================
 * 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(); });
});

Answer 9

仅仅通过更改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);
});

Answer 10

我不确定这段代码，但值得一试。

在jQuery中：

$(document).ready(function() {
    $(/* Put in your "onModalDisplay" here */)./* whatever */(function() {
        $("#Modal").css("overflow", "hidden");
    });
});

正如我之前所说，我不是百分百肯定，但无论如何都要尝试。

Answer 11

添加类'is-modal-open'或使用javascript修改body标签的样式是可以的，它将按预期工作。但是我们要面对的问题是当身体变得溢出时：隐藏，它将跳到顶部，（scrollTop将变为0）。这将在以后成为可用性问题。

作为此问题的解决方案，而不是更改正文标记溢出：隐藏在html标记上更改

$('#myModal').on('shown.bs.modal', function () {
  $('html').css('overflow','hidden');
}).on('hidden.bs.modal', function() {
  $('html').css('overflow','auto');
});

Answer 12

对于 Bootstrap ，您可以尝试此操作（处理Firefox，Chrome和Microsoft Edge）：

body.modal-open {
    overflow: hidden;
    position:fixed;
    width: 100%;
}

希望这会有所帮助......

Answer 13

最佳解决方案是大多数答案使用的仅限css body{overflow:hidden}解决方案。一些答案提供了一个修复，也可以防止由于消失的滚动条引起的“跳跃”;然而，没有一个太优雅。所以，我写了这两个函数，它们看起来效果很好。

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

查看this jsFiddle以查看其使用情况。

Answer 14

您可以使用以下逻辑，我测试了它并且它可以工作（即使在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>

Answer 15

截至2017年11月，Chrome推出了新的css属性

overscroll-behavior: contain;

解决了这个问题，尽管写作时跨浏览器的支持有限。

请参阅以下链接了解完整详情和浏览器支持

Answer 16

许多建议在身体上“溢出：隐藏”，这将无法工作（至少在我的情况下），因为它会使网站滚动到顶部。

这是适用于我的解决方案（包括手机和电脑），使用jQuery：

    $('.yourModalDiv').bind('mouseenter touchstart', function(e) {
        var current = $(window).scrollTop();
        $(window).scroll(function(event) {
            $(window).scrollTop(current);
        });
    });
    $('.yourModalDiv').bind('mouseleave touchend', function(e) {
        $(window).off('scroll');
    });

这将使模式的滚动起作用，并阻止网站同时滚动。

Answer 17

可悲的是，上述答案都没有解决我的问题。

在我的情况下，网页最初有一个滚动条。每当我点击模态时，滚动条就不会消失，标题会向右移动一点。

然后我尝试添加.modal-open{overflow:auto;}（大多数人推荐）。它确实修复了问题：打开模态后出现滚动条。然而，另一个副作用出现了，即标题下方的背景将向左移动一点，以及模态后面的另一个长条＆＃34;

幸运的是，在我添加{padding-right: 0 !important;}之后，一切都完美无缺。标题和正文背景都没有移动，模态仍保留滚动条。

希望这可以帮助那些仍然坚持这个问题的人。祝你好运！

Answer 18

我有一个由复选框黑客生成的侧边栏。但主要的想法是保存文档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);
            }
        });
    })

});

Answer 19

基于这个小提琴：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');

Answer 20

以上所有答案对我来说都不完美。因此，我发现了另一种有效的方法。

只需添加一个scroll.(namespace)侦听器并将scrollTop中的document设置为其最新值即可。

，并在关闭脚本中删除侦听器。

// in case of bootstrap modal example:
$('#myModal').on('shown.bs.modal', function () {

  var documentScrollTop = $(document).scrollTop();
  $(document).on('scroll.noScroll', function() {
     $(document).scrollTop(documentScrollTop);
     return false;
  });

}).on('hidden.bs.modal', function() {

  $(document).off('scroll.noScroll');

});

更新

似乎，这不适用于Chrome。有什么建议可以解决吗？

Answer 21

React ，如果你正在寻找

弹出的模态中的useEffect

 useEffect(() => {
    document.body.style.overflowY = 'hidden';
    return () =>{
      document.body.style.overflowY = 'auto';
    }
  }, [])

Answer 22

为我工作

$('#myModal').on({'mousewheel': function(e) 
    {
    if (e.target.id == 'el') return;
    e.preventDefault();
    e.stopPropagation();
   }
});

Answer 23

我必须设置视口高度才能使其完美运行

body.modal-open {
  height: 100vh;
  overflow: hidden;
}

Answer 24

如果模态是100％高度/宽度＆＃34; mouseenter / leave＆＃34;将工作轻松启用/禁用滚动。这对我来说真的很有用：

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

Answer 25

我不是100％肯定这可以和Bootstrap一起使用但是值得一试 - 它适用于可以在github上找到的Remodal.js：http://vodkabears.github.io/remodal/并且这些方法非常相似

要停止页面跳到顶部并且还阻止内容的右移，在模式被触发时将类添加到body并设置这些CSS规则：

body.with-modal {
    position: static;
    height: auto;
    overflow-y: hidden;
}

position:static和height:auto结合起来阻止内容向右跳跃。 overflow-y:hidden;阻止页面在模态后面滚动。

Answer 26

我就这样做了......

$('body').css('overflow', 'hidden');

但是当卷轴消失时它将所有东西都移动了20px，所以我添加了

$('body').css('margin-right', '20px');

直接在它之后。

适合我。

Answer 27

大多数作品都在这里，但我没有看到任何答案将它们放在一起。

问题有三个。

（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绑定应用于全屏叠加。

Answer 28

我的Bootstrap 3解决方案：

.modal {
  overflow-y: hidden;
}
body.modal-open {
  margin-right: 0;
}

因为对我而言，overflow: hidden课程中唯一的body.modal-open并未阻止该网页由于原始margin-right: 15px而向左移动。

Answer 29

对于那些想知道如何获取bootstrap 3模态的滚动事件的人：

$(".modal").scroll(function() {
    console.log("scrolling!);
});

Answer 30

这对我有用：

$("#mymodal").mouseenter(function(){
   $("body").css("overflow", "hidden"); 
}).mouseleave(function(){
   $("body").css("overflow", "visible");
});

Answer 31

这是我基于 @jpap jquery 的 vanilla JS 解决方案：

let bodyElement = document.getElementsByTagName('body')[0];

// lock body scroll
    let width = bodyElement.scrollWidth;
    bodyElement.classList.add('overflow-hidden');
    bodyElement.style.width = width + 'px';

// unlock body scroll
    bodyElement.classList.remove('overflow-hidden');
    bodyElement.style.width = 'auto';

Answer 32

这有效

body.modal-open {
   overflow: hidden !important;
}

Answer 33

由于这个问题主要在iOS上出现，因此我提供了仅在iOS上解决此问题的代码：

  if(!!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform)) {
    var $modalRep    = $('#modal-id'),
        startScrollY = null, 
        moveDiv;  

    $modalRep.on('touchmove', function(ev) {
      ev.preventDefault();
      moveDiv = startScrollY - ev.touches[0].clientY;
      startScrollY = ev.touches[0].clientY;
      var el = $(ev.target).parents('#div-that-scrolls');
      // #div-that-scrolls is a child of #modal-id
      el.scrollTop(el.scrollTop() + moveDiv);
    });

    $modalRep.on('touchstart', function(ev) {
      startScrollY = ev.touches[0].clientY;
    });
  }

Answer 34

使用body-scroll-lock

非常轻，非常整洁且富有杨树

Answer 35

最终为我解决的问题是Body scroll lock。

其他解决方案不会禁止在iOS上滚动。

Answer 36

为什么不像布尔玛那样那样做？当模式激活时，将其类.is-clipped添加到html中，这是溢出的：hidden！important; 就是这样。

编辑：Okey，布尔玛有这个错误，因此您还必须添加其他类似内容

html.is-modal-active {
  overflow: hidden !important;
  position: fixed;
  width: 100%; 
}

Answer 37

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

我会用

html.no-scroll {
    overflow: hidden;
}

Answer 38

当您在另一个模态中使用模态时会发生上述情况。当我在另一个模态中打开模态时，后者的关闭会从modal-open中删除类body。问题的解决取决于你如何关闭后一种模式。

如果你用html关闭模态，

<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关闭模态，

$(modalSelector).modal("hide");

然后你必须在这之后的某个时间运行命令，

setInterval(function(){$("body").addClass("modal-open");}, 300);

Answer 39

对我来说这是最好的解决方案：

的CSS：

.modal {
     overflow-y: auto !important;
}

和Js：

modalShown = function () {
    $('body').css('overflow', 'hidden');
},

modalHidden = function () {
    $('body').css('overflow', 'auto');
}

Answer 40

我正在使用这个vanilla js函数向主体添加“modal-open”类。（根据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" : "";
};

Answer 41

隐藏溢出并固定位置可以解决问题，但是我的流体设计会将其修复到浏览器宽度之外，所以宽度：100％固定了。

body.modal-open{overflow:hidden;position:fixed;width:100%}

Answer 42

SharePoint 2013中的小注释。正文已有overflow: hidden。你要找的是在id为overflow: hidden的div元素上设置s4-workspace，例如。

var body = document.getElementById('s4-workspace');
body.className = body.className+" modal-open";

Answer 43

试试这段代码：

$('.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');
    }
});

Answer 44

   $('.modal').on('shown.bs.modal', function (e) {
      $('body').css('overflow-y', 'hidden');
   });
   $('.modal').on('hidden.bs.modal', function (e) {
      $('body').css('overflow-y', '');
   });

Answer 45

在对StackOverflow本身进行了8到10个小时的研究之后，我找到了一个可行的解决方案。

突破

$('.modal').is(':visible');

因此，我建立了一个函数来检查是否打开了任何模态，该函数会定期将类* modal-open **添加到

 setInterval(function()
     {
         if($('.modal').is(':visible')===true)
         {
             $("body").addClass("modal-open");
         }
         else
         {
             $("body").removeClass("modal-open");
         }

     },200);

在这里使用 $（“。modal”）的原因是因为所有模态（在Bootstrap中）都使用类 modal （淡入淡出/显示是根据状态）

因此我的模态现在可以完美运行，而无需滚动身体了。

这也是GitHub中的bug /闻所未闻的问题，但没有人打扰。

Answer 46

此问题已修复，解决方案：只需打开bootstap.css并按如下所示进行更改

body.modal-open,
.modal-open .navbar-fixed-top,
.modal-open .navbar-fixed-bottom {
  margin-right: 15px;
}

到

 body.modal-open,
.modal-open .navbar-fixed-top,
.modal-open .navbar-fixed-bottom {
  /*margin-right: 15px;*/
}

请查看以下YouTube视频，不到3分钟，您的问题将解决... https://www.youtube.com/watch?v=kX7wPNMob_E

Answer 47

HTML：

<body onscroll="stop_scroll()">

的javascript：

function stop_scroll(){
    scroll(0,0) ;
}

如果您在(bool)内设置了一个标记stop_scroll()，则可以决定何时使用该标记（如果您只想临时使用它）。

每当某个元素溢出body边界并且窗口倾向于滚动时，这将重置滚动（这完全独立于滚动条; overflow : hidden与它无关）。

打开模态时防止BODY滚动

47 个答案:

又一种选择：车轮事件

JSFiddle

打开模态：

关闭模态：

更新