我注意到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网站上进行了实战测试

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

干杯

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

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

我用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);
    }
}

我是OP

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

我添加了这个类

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

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

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

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

位置:固定;解决方案有一个缺点-当应用此样式时，页面跳转到顶部。Angular的材质对话框有一个很好的解决方案，他们通过将定位应用到html元素来伪造滚动位置。

下面是我修改后的算法仅垂直滚动。左滚动块以完全相同的方式完成。

// This class applies the following styles:
// position: fixed;
// overflow-y: scroll;
// width: 100%;
const NO_SCROLL_CLASS = "bp-no-scroll";

const coerceCssPixelValue = value => {
  if (value == null) {
    return "";
  }

  return typeof value === "string" ? value : `${value}px`;
};

export const blockScroll = () => {
  const html = document.documentElement;
  const documentRect = html.getBoundingClientRect();
  const { body } = document;

  // Cache the current scroll position to be restored later.
  const cachedScrollPosition =
    -documentRect.top || body.scrollTop || window.scrollY || document.scrollTop || 0;

  // Cache the current inline `top` value in case the user has set it.
  const cachedHTMLTop = html.style.top || "";

  // Using `html` instead of `body`, because `body` may have a user agent margin,
  // whereas `html` is guaranteed not to have one.
  html.style.top = coerceCssPixelValue(-cachedScrollPosition);

  // Set the magic class.
  html.classList.add(NO_SCROLL_CLASS);

  // Return a function to remove the scroll block.
  return () => {
    const htmlStyle = html.style;
    const bodyStyle = body.style;

    // We will need to seamlessly restore the original scroll position using
    // `window.scroll`. To do that we will change the scroll behavior to `auto`.
    // Here we cache the current scroll behavior to restore it later.
    const previousHtmlScrollBehavior = htmlStyle.scrollBehavior || "";
    const previousBodyScrollBehavior = bodyStyle.scrollBehavior || "";

    // Restore the original inline `top` value.
    htmlStyle.top = cachedHTMLTop;

    // Remove the magic class.
    html.classList.remove(NO_SCROLL_CLASS);

    // Disable user-defined smooth scrolling temporarily while we restore the scroll position.
    htmlStyle.scrollBehavior = bodyStyle.scrollBehavior = "auto";

    // Restore the original scroll position.
    window.scroll({
      top: cachedScrollPosition.top
    });

    // Restore the original scroll behavior.
    htmlStyle.scrollBehavior = previousHtmlScrollBehavior;
    bodyStyle.scrollBehavior = previousBodyScrollBehavior;
  };
};

逻辑非常简单，如果不考虑某些边界情况，还可以进一步简化。例如，这是我使用的:

export const blockScroll = () => {
  const html = document.documentElement;
  const documentRect = html.getBoundingClientRect();
  const { body } = document;
  const screenHeight = window.innerHeight;

  // Only do the magic if document is scrollable
  if (documentRect.height > screenHeight) {
    const cachedScrollPosition =
      -documentRect.top || body.scrollTop || window.scrollY || document.scrollTop || 0;

    html.style.top = coerceCssPixelValue(-cachedScrollPosition);

    html.classList.add(NO_SCROLL_CLASS);

    return () => {
      html.classList.remove(NO_SCROLL_CLASS);

      window.scroll({
        top: cachedScrollPosition,
        behavior: "auto"
      });
    };
  }
};