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

.disableScroll { position: fixed; overflow-y:scroll }

将这个类提供给可滚动的主体，您仍然应该看到正确的滚动条，但内容是不可滚动的。

用jquery来保持页面的位置

$('body').css('top', - ($(window).scrollTop()) + 'px').addClass('disableScroll');

当你关闭覆盖时，只需恢复这些属性

var top = $('body').position().top;
$('body').removeClass('disableScroll').css('top', 0).scrollTop(Math.abs(top));

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

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

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);

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

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

.disableScroll { position: fixed; overflow-y:scroll }

将这个类提供给可滚动的主体，您仍然应该看到正确的滚动条，但内容是不可滚动的。

用jquery来保持页面的位置

$('body').css('top', - ($(window).scrollTop()) + 'px').addClass('disableScroll');

当你关闭覆盖时，只需恢复这些属性

var top = $('body').position().top;
$('body').removeClass('disableScroll').css('top', 0).scrollTop(Math.abs(top));

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

我有一些其他固定的元素在页面和设置主体的位置固定导致了一堆其他问题，所以我做了一个hack的方式:

const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;

// on opening modal
document.body.style.overflow = "hidden"
document.body.style.paddingRight = `${scrollbarWidth}px`

// on closing modal
document.body.style.overflow = "unset",
document.body.style.paddingRight = "0px"

这个想法是添加一个与浏览器滚动条宽度相同的右填充，以模仿假滚动条并防止内容移动。

我注意到YouTube网站就是这么做的。所以通过检查它一点，我已经能够确定他们正在使用@聚合物/铁覆盖-行为，幸运的是，它可以在web组件/聚合物之外使用:

import {
    pushScrollLock,
    removeScrollLock,
} from '@polymer/iron-overlay-behavior/iron-scroll-manager';

// lock scroll everywhere except scrollElement
pushScrollLock(scrollElement);

// restore scrolling
removeScrollLock(scrollElement);

允许滚动选定的元素 不会以任何方式干扰样式 是否在YouTube网站上进行了实战测试

这似乎是一个成熟的解决方案，当然也是我能找到的最好的解决方案。包装有点重，但我猜大部分都是分开的，当只进口铁卷轴管理器。

干杯

我是OP

在fcalderan回答的帮助下，我能够形成一个解决方案。我把我的解决方案留在这里，因为它带来了如何使用它的清晰度，并增加了一个非常重要的细节，宽度:100%;

我添加了这个类

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

这对我很有用，我用的是fantyapp。