一个简单的答案是，将#ac-wrapper的位置设置为固定，这是您可以使用的，并且不需要停止滚动事件。
例如。

#ac-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,.6);
    z-index: 1001;
}

字符串
这将使弹出窗口的容器始终可见（左上对齐），但仍允许滚动。

但滚动页面弹出打开是不好的！！！（几乎总是无论如何）

你不想允许滚动的原因是因为如果你的弹出窗口不是全屏的或者是半透明的，用户会看到弹出窗口后面的内容滚动。除此之外，当他们关闭弹出窗口时，他们现在将处于页面上的不同位置。
一个解决方案是，当你在JavaScript中绑定一个click事件来显示这个弹出窗口时，也要添加一个类到主体中，基本上有以下规则：

.my-body-noscroll-class {
    overflow: hidden;
}

型
然后，当通过触发某些操作或单击关闭弹出窗口时，您只需再次删除该类，允许在弹出窗口关闭后滚动。
如果用户在弹出窗口打开时滚动，则文档将不会滚动。当用户关闭弹出窗口时，滚动将再次可用，用户可以继续他们离开的地方：）

要禁用滚动条，请执行以下操作：

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

字符串
这将隐藏滚动条
Background-fade-thing：
我创建了自己的弹出对话框小部件，它也有一个背景。我使用了以下CSS：

div.modal{
    position: fixed;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9998;
    background-color: #000;
    display: none;
    filter: alpha(opacity=25); /* internet explorer */
    -khtml-opacity: 0.25; /* khtml, old safari */
    -moz-opacity: 0.25; /* mozilla, netscape */
    opacity: 0.25; /* fx, safari, opera */
}

型

我也遇到过类似的问题;想要在显示“弹出”div时禁用垂直滚动。
更改body的overflow属性确实有效，但也会影响文档的宽度。
我选择了jquery来解决这个问题，并为滚动条使用了占位符。这是在没有绑定到scroll事件的情况下完成的，因此这不会改变滚动条的位置或导致 Flink ：）
超文本标记语言：

<div id="scrollPlaceHolder"></div>

字符串
CSS：

body,html
{
    height:100%; /*otherwise won't work*/
}
#scrollPlaceHolder
{
    height:100%;
    width:0px;
    float:right;
    display: inline;
    top:0;
    right: 0;
    position: fixed;
    background-color: #eee;
    z-index: 100;
}

型
Jquery：

function DisableScrollbar()
{
    // exit if page can't scroll
    if($(document).height() ==  $('body').height()) return;

    var old_width = $(document).width();
    var new_width = old_width;

    // ID's \ class to change
    var items_to_change = "#Banner, #Footer, #Content";

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

    // get new width
    new_width = $(document).width()

    // update width of items to their old one(one with the scrollbar visible)
    $(items_to_change).width(old_width);

    // make the placeholder the same width the scrollbar was
    $("#ScrollbarPlaceholder").show().width(new_width-old_width);

    // and float the items to the other side.
    $(items_to_change).css("float", "left");

}

function EnableScrollbar()
{
    // exit if page can't scroll
    if ($(document).height() ==  $('body').height()) return;   

    // remove the placeholder, then bring back the scrollbar
    $("#ScrollbarPlaceholder").fadeOut(function(){          
        $('body').css('overflow-y','auto');
    });
}

型
希望这对你有帮助。

如果简单切换body的'overflow-y'会破坏页面的滚动位置，请尝试使用以下2个函数（jQuery）：

// Run this function when you open your popup:
var disableBodyScroll = function(){
    window.body_scroll_pos = $(window).scrollTop(); // write page scroll position in a global variable
    $('body').css('overflow-y','hidden');
}

// Run this function when you close your popup:
var enableBodyScroll = function(){
    $('body').css('overflow-y','scroll');
    $(window).scrollTop(window.body_scroll_pos); // restore page scroll position from the global variable
}

字符串

使用下面的代码禁用和启用滚动条。

Scroll = (
    function(){
          var x,y;
         function hndlr(){
            window.scrollTo(x,y);
            //return;
          }  
          return {

               disable : function(x1,y1){
                    x = x1;
                    y = y1;
                   if(window.addEventListener){
                       window.addEventListener("scroll",hndlr);
                   } 
                   else{
                        window.attachEvent("onscroll", hndlr);
                   }     

               },
               enable: function(){
                      if(window.removeEventListener){
                         window.removeEventListener("scroll",hndlr);
                      }
                      else{
                        window.detachEvent("onscroll", hndlr);
                      }
               } 

          }
    })();
 //for disabled scroll bar.
Scroll.disable(0,document.body.scrollTop);
//for enabled scroll bar.
Scroll.enable();

字符串

https://jsfiddle.net/satishdodia/L9vfhdwq/1/

**html：-**打开弹出窗口

弹出

弹出打开滚动停止现在...当我将点击关闭自动滚动运行。
关闭

**css:-**    
        #popup{
        position: fixed;
        background: rgba(0,0,0,.8);
        display: none;
        top: 20px;
        left: 50px;
        width: 300px;
        height: 200px;
        border: 1px solid #000;
        border-radius: 5px;
        padding: 5px;
        color: #fff;
    } 
**jquery**:-
       <script type="text/javascript">
        $("#open_popup").click(function(){
        $("#popup").css("display", "block");
        $('body').css('overflow', 'hidden');
      });

      $("#close_popup").click(function(){
        $("#popup").css("display", "none");
        $('body').css('overflow', 'scroll');
      }); 
      </script>

字符串

我也遇到了同样的问题，并找到了一种方法来摆脱它，你只需要停止在弹出的元素上传播touchmove。对我来说，这是全屏菜单，出现在屏幕上，你不能滚动，现在你可以。

$(document).on("touchmove","#menu-left-toggle",function(e){
    e.stopPropagation();
});

字符串

这个解决方案对我有效。

HTML：

<div id="payu-modal" class="modal-payu">

      <!-- Modal content -->
      <div class="modal-content">
        <span class="close">&times;</span>
        <p>Some text in the Modal..</p>
      </div>

    </div>

字符串

CSS：

.modal-payu {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  bottom: 0;

  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

/* The Close Button */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

型

JS：

<script>
      var btn = document.getElementById("button_1");
      btn.onclick = function() {
        modal.style.display = "block";
        $('html').css('overflow', 'hidden');
      }

    var span = document.getElementsByClassName("close")[0];
    var modal = document.getElementById('payu-modal');

    window.onclick = function(event) {
      if (event.target != modal) {
      }else{
        modal.style.display = "none";
        $('html').css('overflow', 'scroll');
      }
    }

    span.onclick = function() {
      modal.style.display = "none";
      $('html').css('overflow', 'scroll');
    }

    </script>

型

我遇到了这个问题，并尝试了几种解决方案，这是解决我的问题的文章（https://css-tricks.com/prevent-page-scrolling-when-a-modal-is-open/），它很简单！
它使用“固定身体”解决方案，这在很多帖子中很常见。这个解决方案的问题是，当弹出窗口关闭时，正文将滚动回顶部。但文章指出：在使用该解决方案时，通过操作CSS top和position属性，我们可以恢复滚动位置。
该解决方案的另一个问题是，您不能将该解决方案应用于多个弹出窗口场景。所以我添加了一个变量来存储弹出窗口的计数，只是为了确保程序不会在错误的时间触发初始化进程或重置进程。
以下是我得到的最终解决方案：

// freeze or free the scrolling of the body:

const objectCountRef = { current: 0 }

function freezeBodyScroll () {
  if (objectCountRef.current === 0) {  // trigger the init process when there is no other popup exist
    document.body.style.top = `-${window.scrollY}px`
    document.body.style.position = 'fixed'
  }
  objectCountRef.current += 1
}
function freeBodyScroll () {
  objectCountRef.current -= 1
  if (objectCountRef.current === 0) {  // trigger the reset process when all the popup are closed
    const scrollY = document.body.style.top
    document.body.style.position = ''
    document.body.style.top = ''
    window.scrollTo(0, parseInt(scrollY || '0') * -1)
  }
}

字符串
你也可以在我的Codepen上看到演示：https://codepen.io/tabsteveyang/pen/WNpbvyb的

编辑

关于‘固定体’解决方案的更多信息

该方法主要是将body元素的CSS position属性设置为'fixed'，以使其不可滚动。无论它已经滚动了多远，当主体固定时，它将滚动回顶部，这是我不希望看到的行为。（想象一下，用户正在浏览一个很长的内容，几乎滚动到页面的底部，突然弹出一个弹出窗口，使页面滚动回到顶部，这是一个糟糕的用户体验）

文章中的解决方案

基于'fixed body'方法，另外，该解决方案将正文的CSS顶部设置为'-window.scrollY px'的值，以使正文看起来像是在固定时停留在当前滚动位置。此外，该解决方案使用CSS body的顶部作为临时引用，以便我们在希望使body再次可滚动时可以通过属性检索滚动位置。（注意，您必须将位置乘以-1以使其为正）