最简单的方法是:

$("body").css("overflow", "hidden"); // Remove the scroll bar temporarily

要撤消它:

$("body").css("overflow", "auto");

很容易实现，但唯一的缺点是:

如果页面是居中对齐的(水平)，它会向左跳一点。

这是由于滚动条被移除，并且视口变得更宽。

这是目前为止我得到的最简单的解。相信我，其他的我都试过了，这是最简单的。它在Windows设备上工作得很好，它将页面从右边推到为系统滚动条留出空间，而IOS设备在浏览器中不需要滚动条的空间。所以通过使用这个，你不需要在右边添加填充，所以当你隐藏溢出的正文或html与css页面不会闪烁。

如果你仔细想想，解决方法其实很简单。其思想是在弹出窗口被打开时赋予window.scrollTop()相同的确切位置。当窗口调整大小时也要改变这个位置(因为一旦发生这种情况，滚动位置就会改变)。

所以我们开始…

首先，让我们创建一个变量，让你知道弹出窗口是打开的，并将其称为stopWindowScroll。如果我们不这样做，那么你会在你的页面上得到一个未定义变量的错误，并将其设置为0 -不活跃。

$(document).ready(function(){
    stopWindowScroll = 0;
});

现在让我们创建一个打开的弹出函数witch可以是你代码中的任何函数，它可以触发你作为插件或自定义使用的任何弹出。在这种情况下，它将是一个简单的自定义弹出窗口，带有一个简单的文档点击功能。

$(document).on('click','.open-popup', function(){
    // Saving the scroll position once opening the popup.
    stopWindowScrollPosition = $(window).scrollTop();
    // Setting the stopWindowScroll to 1 to know the popup is open.
    stopWindowScroll = 1;
    // Displaying your popup.
    $('.your-popup').fadeIn(300);
});

接下来我们要做的就是创建close popup函数，我再重复一遍，这个函数可以是你已经创建的或者在插件中使用的任何函数。重要的是，我们需要这两个函数来设置stopWindowScroll变量为1或0，以知道它何时打开或关闭。

$(document).on('click','.open-popup', function(){
    // Setting the stopWindowScroll to 0 to know the popup is closed.
    stopWindowScroll = 0;
    // Hiding your popup
    $('.your-popup').fadeOut(300);
});

然后让我们创建窗口。scroll函数，这样我们可以防止滚动一旦上面提到的stopWindowScroll设置为1 -作为活动。

$(window).scroll(function(){
    if(stopWindowScroll == 1) {
         // Giving the window scrollTop() function the position on which
         // the popup was opened, this way it will stay in its place.
         $(window).scrollTop(stopWindowScrollPosition);
    }
});

这是它。除了您自己的页面样式外，不需要CSS来完成此工作。这对我来说很有吸引力，我希望它能帮助到你和其他人。

下面是JSFiddle的一个工作示例:

JS小提琴示例

如果有帮助，请告诉我。的问候。

我发现改变身体的风格是没有必要的。

我们唯一需要做的就是防止整个文档(html元素)出现y滚动。

我们可以用Javascript来创建和销毁样式表。我是这样做的:

https://jsfiddle.net/3os72ryk/

var scroll_style_element;

function disable_scrolling(){
    
  // Create a style sheet we will only use to disable scrolling :
  scroll_style_element = document.createElement('style');
  document.head.appendChild(scroll_style_element);
  const scroll_style_sheet = scroll_style_element.sheet;
    
  scroll_style_sheet.insertRule('html{height:100%;overflow-y:hidden;}', scroll_style_sheet.cssRules.length);
}

function enable_scrolling(){
  if( scroll_style_element ) document.head.removeChild(scroll_style_element);
}

非常有兴趣知道是否有人发现这种方法有问题，所以如果你发现了，请在下面评论。

这个怎么样?(如果你正在使用jQuery)

var $window = $(window);
var $body = $(window.document.body);

window.onscroll = function() {
    var overlay = $body.children(".ui-widget-overlay").first();

    // Check if the overlay is visible and restore the previous scroll state
    if (overlay.is(":visible")) {
        var scrollPos = $body.data("scroll-pos") || { x: 0, y: 0 };
        window.scrollTo(scrollPos.x, scrollPos.y);
    }
    else {
        // Just store the scroll state
        $body.data("scroll-pos", { x: $window.scrollLeft(), y: $window.scrollTop() });
    }
};

在Chrome 56和其他现代浏览器中，你必须在addEventListener调用中添加passive:false来使preventDefault生效。所以我用这个来停止手机上的滚动:

function preventDefault(e){
    e.preventDefault();
}

function disableScroll(){
    document.body.addEventListener('touchmove', preventDefault, { passive: false });
}
function enableScroll(){
    document.body.removeEventListener('touchmove', preventDefault, { passive: false });
}

为了防止跳楼，我用了这个

export function toggleBodyScroll(disable) {
  if (!window.tempScrollTop) {
    window.tempScrollTop = window.pageYOffset; 
    // save the current position in a global variable so I can access again later

  }
  if (disable) {
    document.body.classList.add('disable-scroll');
    document.body.style.top = `-${window.tempScrollTop}px`;
  } else {
    document.body.classList.remove('disable-scroll');
    document.body.style.top = `0px`;
    window.scrollTo({top: window.tempScrollTop});
    window.tempScrollTop = 0;
  }
}

在CSS中

.disable-scroll {
  height: 100%;
  overflow: hidden;
  width: 100%;
  position: fixed;
}