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

我们唯一需要做的就是防止整个文档(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);
}

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

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

.no-scroll{
  overflow: hidden;
}

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

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

这个怎么样?(如果你正在使用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() });
    }
};

根据你想要使用移除的滚动来实现什么，你可以只修复你想要移除滚动的元素(单击，或任何其他你想要临时禁用滚动的触发器)

我正在寻找一个“临时无滚动”的解决方案，这解决了我的需要

创建一个班级

.fixed{
    position: fixed;
}

然后用Jquery

var someTrigger = $('#trigger'); //a trigger button
var contentContainer = $('#content'); //element I want to temporarily remove scroll from

contentContainer.addClass('notfixed'); //make sure that the element has the "notfixed" class

//Something to trigger the fixed positioning. In this case we chose a button.
someTrigger.on('click', function(){

    if(contentContainer.hasClass('notfixed')){
        contentContainer.removeClass('notfixed').addClass('fixed');

    }else if(contentContainer.hasClass('fixed')){
        contentContainer.removeClass('fixed').addClass('notfixed');
    };
});

我发现这是一个非常简单的解决方案，适用于所有浏览器，也适用于便携式设备(如iphone，平板电脑等)。由于元素是临时固定的，所以没有滚动:)

注意!根据contentContainer元素的位置，你可能需要从左边调整它。这可以很容易地通过添加一个css左值的元素时，固定类是活跃的

contentContainer.css({
    'left': $(window).width() - contentContainer.width()/2 //This would result in a value that is the windows entire width minus the element we want to "center" divided by two (since it's only pushed from one side)
});

根据galambalazs的帖子，我将添加对触摸设备的支持，允许我们触摸但不能上下滚动:

function disable_scroll() {
   ...
   document.ontouchmove = function(e){ 
        e.preventDefault(); 
   }
}

function enable_scroll() {
   ...
   document.ontouchmove = function(e){ 
     return true; 
   }
}

我也有同样的问题，下面是我处理它的方法。

/* file.js */
var body = document.getElementsByTagName('body')[0];
//if window dont scroll
body.classList.add("no-scroll");
//if window scroll
body.classList.remove("no-scroll");

/* file.css */
.no-scroll{
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

希望这对你有所帮助。