如果覆盖层下的页面可以“固定”在顶部，当你打开覆盖层时，你可以设置

body { 
  position: fixed; 
  overflow-y:scroll 
}

您应该仍然可以看到右边的滚动条，但是内容是不可滚动的。当你关闭覆盖时，只需恢复这些属性

body { 
  position: static;
  overflow-y:auto 
}

我之所以建议采用这种方式，只是因为您不需要更改任何滚动事件

如果我已经滚动了页面呢?

如果你在层打开之前通过javascript获得document.documentElement.scrollTop属性，你可以动态地将该值赋给body元素的top属性:通过这种方法，页面将保持当前的滚动位置，无论你是在顶部还是已经滚动了。

Css

.noscroll {
  position: fixed; 
  inline-size: 100%;
  overflow-y:scroll 
}

JS

$('body').css('top', -(document.documentElement.scrollTop) + 'px')
         .addClass('noscroll');

这对我来说真的很好....

// disable scrolling
$('body').bind('mousewheel touchmove', lockScroll);

// enable scrolling
$('body').unbind('mousewheel touchmove', lockScroll);


// lock window scrolling
function lockScroll(e) {
    e.preventDefault();
}

只需用决定何时锁定滚动的任何东西来包装这两行代码。

e.g.

$('button').on('click', function() {
     $('body').bind('mousewheel touchmove', lockScroll);
});

我用scrollLock方法解决了这个问题，该方法为滚动轮事件和按下键事件设置侦听器，并使用preventScroll方法处理这些事件。就像这样:

preventScroll = function (e) {
    // prevent scrollwheel events
    e.preventDefault();
    e.stopPropagation();

    // prevent keydown events
    var keys = [32, 33, 34, 35, 37, 38, 39, 40];
    if (keys.includes(e.keyCode)) {
        e.preventDefault();
    }

    return false;
}

scrollLock = function (lock) {
    if (lock) {
        document.querySelector("#container").addEventListener("wheel", preventScroll);
        document.addEventListener("keydown", preventScroll);
    }
    else {
        document.querySelector("#container").removeEventListener("wheel", preventScroll);
        document.querySelector("#container").removeEventListener("keydown", preventScroll);
    }
}

在公认的解决方案基础上增加了四个小补充:

Apply 'noscroll' to html instead of to body to prevent double scroll bars in IE To check if there's actually a scroll bar before adding the 'noscroll' class. Otherwise, the site will also jump pushed by the new non-scrolling scroll bar. To keep any possible scrollTop so the entire page doesn't go back to the top (like Fabrizio's update, but you need to grab the value before adding the 'noscroll' class) Not all browsers handle scrollTop the same way as documented at http://help.dottoro.com/ljnvjiow.php

完整的解决方案，似乎适用于大多数浏览器:

CSS

html.noscroll {
    position: fixed; 
    overflow-y: scroll;
    width: 100%;
}

禁用滚动

if ($(document).height() > $(window).height()) {
     var scrollTop = ($('html').scrollTop()) ? $('html').scrollTop() : $('body').scrollTop(); // Works for Chrome, Firefox, IE...
     $('html').addClass('noscroll').css('top',-scrollTop);         
}

启用滚动

var scrollTop = parseInt($('html').css('top'));
$('html').removeClass('noscroll');
$('html,body').scrollTop(-scrollTop);

感谢法布里齐奥和德扬把我带到了正确的轨道上，感谢布罗丁戈解决了双滚动条的问题

包含jQuery:

禁用

$.fn.disableScroll = function() {
    window.oldScrollPos = $(window).scrollTop();

    $(window).on('scroll.scrolldisabler',function ( event ) {
       $(window).scrollTop( window.oldScrollPos );
       event.preventDefault();
    });
};

启用

$.fn.enableScroll = function() {
    $(window).off('scroll.scrolldisabler');
};

使用

//disable
$("#selector").disableScroll();
//enable
$("#selector").enableScroll();

你不能禁用滚动事件，但是你可以禁用导致滚动的相关操作，比如鼠标滚轮和touchmove:

$('body').on('mousewheel touchmove', function(e) {
      e.preventDefault();
});