我知道这是一个老问题，但我不得不做一些非常相似的事情，在花了一段时间寻找答案并尝试了不同的方法后，我最终使用了一个非常简单的解决方案。

我的问题非常相似，几乎相同，唯一的区别是我不需要实际显示滚动条-我只需要确保它的宽度仍然被使用，所以当我的覆盖显示时，页面的宽度不会改变。

当我开始滑动覆盖到屏幕，我做:

$('body').addClass('stop-scrolling').css('margin-right', 8);

在我将覆盖层从屏幕上滑动后，我这样做:

$('body').removeClass('stop-scrolling').css('margin-right', 0);

重要:这是完美的工作，因为我的叠加是绝对定位，对:0px时可见。

我在这里用了一个简单的技巧:

.no-scroll{
  overflow: hidden;
}

let toggle_scrolling_state = () => {
   element.classList.toggle("no-scroll");
}

然后当你想要停止滚动事件或…

我在移动屏幕上有类似的动画问题，但在笔记本电脑上没有，当尝试使用jquery的animate命令动画一个div时。所以我决定使用一个计时器来频繁地恢复窗口的滚动位置，这样肉眼就能看到文档是静态的。这一解决方案在三星Galaxy-2或iphone-5等小屏幕移动设备上运行良好。

该方法的主要逻辑:设置窗口滚动位置到原始滚动位置的定时器应该在jquery animate命令之前启动，然后当动画完成时，我们需要清除这个定时器(原始滚动位置是动画开始之前的位置)。

我惊喜地发现，如果计时器间隔为1毫秒，文档在动画持续时间内实际上是静态的，这正是我的目标。

//get window scroll position prior to animation
//so we can keep this position during animation
var xPosition = window.scrollX || window.pageXOffset || document.body.scrollLeft;
var yPosition = window.scrollY || window.pageYOffset || document.body.scrollTop;

//NOTE:restoreTimer needs to be global variable
//start the restore timer
restoreTimer = setInterval(function() {
    window.scrollTo(xPosition, yPosition);
}, 1);

//animate the element emt
emt.animate({
    left: "toggle",
    top: "toggle",
    width: "toggle",
    height: "toggle"
}, 500, function() {
    //when animation completes, we stop the timer
    clearInterval(restoreTimer);
});

另一个有效的解决方案:根据Mohammad Anini在这篇文章中关于启用/禁用滚动的回答，我还发现修改后的代码版本如下所示有效。

//get current scroll position
var xPosition = window.scrollX || window.pageXOffset || document.body.scrollLeft;
var yPosition = window.scrollY || window.pageYOffset || document.body.scrollTop;

//disable scrolling
window.onscroll = function() {
    window.scrollTo(xPosition, yPosition);
};

//animate and enable scrolling when animation is completed
emt.animate({
    left: "toggle",
    top: "toggle",
    width: "toggle",
    height: "toggle"
}, 500, function() {
    //enable scrolling when animation is done
    window.onscroll = function() {};
});

这是目前为止我得到的最简单的解。相信我，其他的我都试过了，这是最简单的。它在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小提琴示例

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

CSS

  overflow-y: hidden
}

Javascript
``let body = document.querySelector('body');
if(condition)  {
 //disable scroll on the entire body
 body?.classList.add("disable-scroll");
} 
else {
 //to remove the class attrib
 body?.removeAttribute("class");
 //or to remove the disable-scroll class only
 body?.classList.remove("dissble-scroll");
}

这比长代码好多了。容易理解

var winX = null;
var winY = null;

window.addEventListener('scroll', function () {
    if (winX !== null && winY !== null) {
        window.scrollTo(winX, winY);
    }
});

function disableWindowScroll() {
    winX = window.scrollX;
    winY = window.scrollY;
}

function enableWindowScroll() {
    winX = null;
    winY = null;
}