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

如果你用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);

在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 (fade/show是根据状态而定)

所以我的模态现在运行完美没有身体得到滚动。

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

为什么不像布尔玛那样做呢? 当modal is-active时，将它们的类.is-clipped添加到html中，即overflow: hidden!important; 就是这样。

编辑:好的，Bulma有这个bug，所以你必须添加其他东西，比如

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

反应，如果你在寻找

正在弹出的模态中的useEffect

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

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

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

这个解决方案对我很有效:

var scrollDistance = 0; $(document).on("show.bs.modal", ".modal", function () { scrollDistance = $(window).scrollTop(); $("body").css("top", scrollDistance * -1); }); $(document).on("hidden.bs.modal", ".modal", function () { $("body").css("top", ""); $(window).scrollTop(scrollDistance); }); .content-area { height: 750px; background: grey; text-align: center; padding: 25px; font-weight:700; font-size: 30px; } body.modal-open { position: fixed; left: 0; width: 100%; } <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet"/> <script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script> <div class="content-area"> Scroll Down To Modal Button<br/> <svg xmlns="http://www.w3.org/2000/svg" width="56" height="56" fill="currentColor" class="bi bi-arrow-down" viewBox="0 0 16 16"> <path fill-rule="evenodd" d="M8 1a.5.5 0 0 1 .5.5v11.793l3.146-3.147a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 .708-.708L7.5 13.293V1.5A.5.5 0 0 1 8 1z"/> </svg> </div> <center class="my-3"> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal"> Launch demo modal </button> </center> <div class="content-area"></div> <!-- Modal --> <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p> <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div>

基本上，当打开模态时，它会为主体添加一个负顶部，以在打开模态之前保持窗口滚动位置。关闭模态时，窗口滚动保持使用相同的值应用于顶部时，打开。 这种方法可以防止身体滚动。

这是一把能用的小提琴