最著名的答案很简单，即。

body{
   height: 100%;
   overflow-y: hidden;
}

但是，如果你想在子/孙子中打开一个模态并停止滚动，该如何解决呢?更长期的解决方案是使用props或存储在Angular/React中，并改变body标签的高度和溢出属性。

另一种解决方案是从子/孙子组件获取主体，并相应地改变其高度和溢出以停止滚动。 在我的例子中，我只是这样做的

if(isModalExpanded){
    document.body.style.overflow = "hidden";
    document.body.style.height = "100%";
}
else{
    document.body.style.overflow = "auto";
    document.body.style.height = "auto";
}

警告:下面的选项与Bootstrap v3.0无关。X，因为在这些版本中滚动被显式地限制在模态本身。如果禁用轮事件，可能会无意中阻止一些用户在高度大于视口高度的模态中查看内容。

还有另一个选择:车轮事件

滚动事件不可取消。但是，可以取消鼠标滚轮和滚轮事件。需要注意的是，并不是所有的传统浏览器都支持它们，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

隐藏溢出和固定位置的技巧，但在我的流体设计中，它会固定它超过浏览器宽度，所以宽度:100%固定。

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

添加类'is-modal-open'或用javascript修改body标签的样式都是可以的，它会像预期的那样工作。但我们要面对的问题是当body变成overflow:hidden时，它会跳到顶部(scrollTop将变成0)。这将在以后成为一个可用性问题。

作为这个问题的解决方案，而不是改变正文标签溢出:隐藏改变它在html标签

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

这个问题已经解决， 解决方案:只需打开bootstrap .css并按以下方式更改

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

to

 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

为我工作

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