打开模式时防止 BODY 滚动答案

【问题标题】：Prevent BODY from scrolling when a modal is opened打开模式时防止 BODY 滚动
【发布时间】：2012-03-21 06:50:35
【问题描述】：

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

当模态打开但没有成功时，我尝试调用下面的一段 javascript

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

与

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

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

【问题讨论】：

标签： javascript jquery css scroll

【解决方案1】：

这个解决方案对我有用：

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>

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

这是一个有效的fiddle

【讨论】：

【解决方案2】：

我阅读了大部分关于 React 的答案。

我的 React 功能组件的最佳解决方案是使用 @arcticmatt 最初提供的解决方案

我在下面的代码示例中包含了其他答案中提到的一些改进（注意 useEffect 定义）：

import {useEffect, useRef} from "react";

export default function PopoverMenu({className, handleClose, children}) {
  const selfRef = useRef(undefined);

  useEffect(() => {
    const isPopoverOpenned = selfRef.current?.style.display !== "none";
    const focusedElement = document?.activeElement;
    const scrollPosition = {x: window.scrollX, y: window.scrollY};
    if (isPopoverOpenned) {
      preventDocBodyScrolling();
    } else {
      restoreDocBodyScrolling();
    }

    function preventDocBodyScrolling() {
      const width = document.body.clientWidth;
      const hasVerticalScrollBar = (window.innerWidth > document.documentElement.clientWidth);
      document.body.style.overflowX = "hidden";
      document.body.style.overflowY = hasVerticalScrollBar ? "scroll" : "";
      document.body.style.width = `${width}px`;
      document.body.style.position = "fixed";

    }

    function restoreDocBodyScrolling() {
      document.body.style.overflowX = "";
      document.body.style.overflowY = "";
      document.body.style.width = "";
      document.body.style.position = "";
      focusedElement?.focus();
      window.scrollTo(scrollPosition.x, scrollPosition.y);
    }


    return () => {
      restoreDocBodyScrolling(); // cleanup on unmount
    };
  }, []);

  return (
    <>
      <div
        className="backdrop"
        onClick={() => handleClose && handleClose()}
      />
      <div
        className={`pop-over-menu${className ? (` ${className}`) : ""}`}
        ref={selfRef}
      >
        <button
          className="pop-over-menu--close-button" type="button"
          onClick={() => handleClose && handleClose()}
        >
          X
        </button>
        {children}
      </div>
    </>
  );
}

【讨论】：

【解决方案3】：

这是我在 React 中为解决此问题所做的工作：

useEffect(() => {
  if (isShown) {
    const width = document.body.clientWidth;
    document.body.style.overflow = "hidden";
    document.body.style.width = `${width}px`;
  } else {
    document.body.style.overflow = "visible";
    document.body.style.width = `auto`;
  }

  return () => {
    document.body.style.overflow = "visible";
    document.body.style.width = `auto`;
  };
}, [isShown]);

【讨论】：

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

反应，如果你正在寻找

在弹出的模态中使用效果

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

【讨论】：

【解决方案6】：

这是我基于 @jpap jquery 的香草 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';

【讨论】：

【解决方案7】：

这行得通

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

【讨论】：

【解决方案8】：

以上答案都不适合我。所以我找到了另一种效果很好的方法。

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

并且在你的关闭脚本中移除监听器。

// 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 上效果不佳。有什么建议可以解决吗？

【讨论】：

这是我想出的更好的变体。但是，唉，我也遇到了 Chrome 的问题。由于奇怪且不可预测的副作用，它仍然存在问题

【解决方案9】：

在对 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 中的一个错误/闻所未闻的问题，但没有人打扰。

【讨论】：

我确信这行得通，如果它是页面上唯一的东西，它甚至可能是高性能的，但是随着你的应用程序的增长，添加更多这样的间隔将加起来你的应用程序性能的缓慢死亡.
与其每 200 毫秒轮询一次，不如在模式打开时分配一个事件处理程序。例如。类似$("body").on("show.bs.modal", ".modal", function() { $("body").addClass("modal-open"); });

【解决方案10】：

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

body.modal-open {
    overflow: hidden;
}

您可能会争辩说上面的代码属于 Bootstrap CSS 代码库，但这是将其添加到您的网站的简单修复。

2013 年 2 月 8 日更新
现在，这在 Twitter Bootstrap 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 中返回，明确用于防止滚动：

在 body 上重新引入 .modal-open（这样我们就可以在那里对滚动条进行核弹）

看到这个：https://github.com/twitter/bootstrap/pull/6342 - 查看模态部分。

【讨论】：

这在 bootstrap 2.2.2 中不再起作用。希望 .modal-open 将来会回来......github.com/twitter/bootstrap/issues/5719
@ppetrid 我不希望它返回。基于这篇文章：github.com/twitter/bootstrap/wiki/Upcoming-3.0-changes（看底部）。引用：“不再有内部模态滚动。相反，模态将增长以容纳其内容，页面滚动以容纳模态。”
@Bagata Cool - modal-open 将在 Bootstrap 3 中返回，因此在启动时删除上述代码应该是安全的。
这就是为什么人们应该继续向下滚动，如果选择的答案不满足你，你很有可能会找到这样的宝石。没想到一个 97+ 投票的答案被其他不太喜欢的 cmets 埋得如此之深。
这个问题是为了防止文档在打开模式时滚动到顶部，您需要添加 body.modal-open{overflow:visible}。您的解决方案目前有效，缺点是一旦打开模式，文档就会滚动到顶部

【解决方案11】：

因为对我来说这个问题主要出现在 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;
    });
  }

【讨论】：

【解决方案12】：

对于 Bootstrap，您可以试试这个（在 Firefox、Chrome 和 Microsoft Edge 上工作）：

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

希望这会有所帮助...

【讨论】：

【解决方案13】：

为什么不像布尔玛那样做呢？当 modal 处于活动状态时，然后将它们的类 .is-clipped 添加到 html 溢出：hidden!important; 就是这样。

编辑：Okey，Bulma 有这个错误，所以您还必须添加其他内容，例如

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

【讨论】：

【解决方案14】：

您需要超越@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

【讨论】：

由于缺少更好的术语，我得到了一个“跳跃”的屏幕，而对我来说，关键是遵循宽度设置。非常感谢。
@Hcabnettek 是的：“jumpy”==“文档重排”。很高兴它帮助了你！ :-)
这个有css解决方案吗？它适用于所有浏览器和移动设备吗？
只是一个错字：在最后一步一定是$body.css("overflow", "auto"); :)
哦，伙计，多么奇妙的想法。 @jpap 你帮我解决了困扰我很久的文档重排问题。

【解决方案15】：

截至 2017 年 11 月，Chrome 引入了一个新的 CSS 属性

overscroll-behavior: contain;

虽然在撰写本文时，跨浏览器支持有限，但它解决了这个问题。

完整详情和浏览器支持请参见下面的链接

【讨论】：

即使在 2020 年，caniuse 对此的支持率也只有 78%。几乎不是一个可行的解决方案。

【解决方案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');
    });

这将使模态框的滚动起作用，并防止网站同时滚动。

【讨论】：

看起来这个解决方案也修复了这个 iOS 错误：hackernoon.com/…

【解决方案17】：

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

如果你用 html 之类的方式关闭 modal，

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

【讨论】：

【解决方案18】：

遗憾的是，以上答案都没有解决我的问题。

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

然后我尝试添加.modal-open{overflow:auto;}（大多数人推荐）。它确实解决了问题：打开模式后出现滚动条。但是，另一个副作用是“标题下方的背景会向左移动一点，以及模态后面的另一个长条”

幸运的是，在我添加{padding-right: 0 !important;} 之后，一切都已完美修复。 header 和 body 背景都没有移动，modal 仍然保持滚动条。

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

【讨论】：

【解决方案19】：

为我工作

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

【讨论】：

【解决方案20】：

我有一个由复选框 hack 生成的侧边栏。但主要思想是保存文档scrollTop，而不是在滚动窗口期间更改它。

我只是不喜欢当 body 变为“溢出：隐藏”时页面跳转。

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

});

【讨论】：

【解决方案21】：

接受的答案在移动设备上不起作用（至少是 iOS 7 w/Safari 7），我不希望 MOAR JavaScript 在我的网站上运行，而 CSS 可以。

此 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.

【讨论】：

谢谢！手机（至少 iOS 和 Android 原生浏览器）让我头疼，如果没有 position: fixed 就无法工作。
感谢您在显示/隐藏模式时还包括防止页面左/右跳转的代码。这非常有用，我证实它解决了我在运行 iOS 9.2.1 的 iPhone 5c 上的 Safari 上遇到的问题。
为了固定滚动到顶部，您可以在添加类之前记录位置，然后在删除类之后，执行window.scroll到记录的位置。这就是我为自己修复它的方法：pastebin.com/Vpsz07zd.
虽然我觉得这只能满足非常基本的需求，但它是一个有用的修复。谢谢。
以下是我使用 jquery 保留滚动位置的方法：js const currPageScrollPos = $(window).scrollTop() $("body").removeClass("show_overlay") $(window).delay(5).scrollTop(currPageScrollPos)

【解决方案22】：

给 SharePoint 2013 中的用户的一个小提示。正文中已经有 overflow: hidden。您正在寻找的是在具有 id s4-workspace 的 div 元素上设置 overflow: hidden，例如

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

【讨论】：

【解决方案23】：

添加类 'is-modal-open' 或使用 javascript 修改 body 标签的样式是可以的，它会按预期工作。但是我们要面临的问题是当 body 变为 overflow:hidden 时，它会跳到顶部，（ scrollTop 将变为 0 ）。这将成为稍后的可用性问题。

作为这个问题的解决方案，不改变body标签溢出：hidden改变它在html标签上

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

【讨论】：

这绝对是正确的答案，因为普遍的共识答案会将页面滚动到顶部，这是一种可怕的用户体验。你应该为此写一篇博客。我最终把它变成了一个全球性的解决方案。
非常简单正确的答案。在 2020 年解决了我的问题。

【解决方案24】：

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

【讨论】：

请编辑更多信息。不鼓励使用纯代码和“试试这个”的答案，因为它们不包含可搜索的内容，也没有解释为什么有人应该“试试这个”。我们在这里努力成为知识的资源。

【解决方案25】：

基于这个小提琴：http://jsfiddle.net/dh834zgw/1/

以下 sn-p (使用 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;
 }

现在当你移除modal时，别忘了移除html标签上的noscroll类：

$('html').toggleClass('noscroll');

【讨论】：

不应该将overflow 设置为hidden 吗？ +1 虽然这对我有用（使用hidden）。

【解决方案26】：

如果模式为 100% 高度/宽度，“mouseenter/leave”将可以轻松启用/禁用滚动。这对我来说真的很有效：

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

【讨论】：

【解决方案27】：

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

我会用

html.no-scroll {
    overflow: hidden;
}

【讨论】：

【解决方案28】：

我不能 100% 确定这将与 Bootstrap 一起使用，但值得一试 - 它与 Remodal.js 一起使用，可以在 github 上找到：http://vodkabears.github.io/remodal/ 并且方法非常相似是有意义的。

要阻止页面跳转到顶部并防止内容右移，请在触发模式时向 body 添加一个类并设置以下 CSS 规则：

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

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

【讨论】：

这个解决方案在 Safari 11.1.1、Chrome 67.0.3396.99 和 Firefox 60.0.2 中非常适合我。谢谢！

【解决方案29】：

此问题已修复，解决方案：只需打开您的 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;*/
}

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

【讨论】：

有人用这个试试吗...？
我认为您误解了整个问题。这与定位滚动条无关，而是防止您在电脑上使用鼠标滚轮或在移动设备上使用手指在后台滚动。

【解决方案30】：

试试这个：

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

它对我有用。 (支持IE8)

【讨论】：

这有效，但也会导致您在使用 position: fixed 时打开模式时跳转到顶部。