CSS

.noScroll {
    overflow: hidden;
}

Javascript

<script>
    function toggleNav() {
        document.body.classList.toggle("noScroll");
    }
</script>

按钮

<button onclick="toggleNav()">
 Toggle Nav
</button>

不要使用overflow: hidden;在身体。它会自动将所有内容滚动到顶部。也不需要JavaScript。利用溢出:auto;。这个解决方案甚至适用于移动Safari:

HTML结构

<div class="overlay">
    <div class="overlay-content"></div>
</div>

<div class="background-content">
    lengthy content here
</div>

样式

.overlay{
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-color: rgba(0, 0, 0, 0.8);

    .overlay-content {
        height: 100%;
        overflow: scroll;
    }
}

.background-content{
    height: 100%;
    overflow: auto;
}

在这里可以看到演示和源代码。

更新:

对于想要键盘空格键的人，page up/down工作:你需要专注于覆盖，例如，点击它，或手动JS聚焦在它之前，这部分div将响应键盘。当覆盖层被“关闭”时也是一样，因为它只是将覆盖层移动到一边。否则对浏览器来说，这只是两个正常的div，它不知道为什么它应该关注其中的任何一个。

值得注意的是，有时在body标签上添加"overflow:hidden"并不能完成这项工作。在这些情况下，您还必须将属性添加到html标记中。

html, body {
    overflow: hidden;
}

理论

看看pinterest网站的当前实现(未来可能会改变)，当你打开覆盖时，一个noscroll类被应用到body元素(设置溢出:隐藏)，使body不再可滚动。

动态创建的覆盖或已经注入到页面中并通过display: block可见-这没有什么区别-具有position: fixed和overflow-y: scroll，顶部，左侧，右侧和底部属性设置为0:这种风格使覆盖填充整个视口(但现在我们是在2022年，所以你可以使用inset: 0代替)。

覆盖层内的div位于position: static，因此垂直滚动条与该元素相关。这将产生一个可滚动但固定的覆盖。

当你关闭覆盖时，你必须隐藏它(使用display: none)，你甚至可以通过javascript删除节点(或者只是里面的内容，这取决于你，但也取决于内容的性质)。

最后一步是删除应用于主体的noscroll类(这样溢出属性就会回到它之前的值)

Code

Codepen例子

(它通过改变overlay的aria-hidden属性来显示和隐藏它，并增加其可访问性)。

标记 (打开按钮)

<button type="button" class="open-overlay">OPEN LAYER</button>

(覆盖和关闭按钮)

<section class="overlay" aria-hidden="true" tabindex="-1">
  <div>
    <h2>Hello, I'm the overlayer</h2>
    ...   
    <button type="button" class="close-overlay">CLOSE LAYER</button>
  </div>
</section>

CSS

.noscroll { 
  overflow: hidden;
}

.overlay { 
   position: fixed; 
   overflow-y: scroll;
   inset: 0; }

[aria-hidden="true"]  { display: none; }
[aria-hidden="false"] { display: block; }

Javascript (vanilla-JS)

var body = document.body,
    overlay = document.querySelector('.overlay'),
    overlayBtts = document.querySelectorAll('button[class$="overlay"]'),
    openingBtt;
    
[].forEach.call(overlayBtts, function(btt) {

  btt.addEventListener('click', function() { 
     
     /* Detect the button class name */
     var overlayOpen = this.className === 'open-overlay';
     
     /* storing a reference to the opening button */
     if (overlayOpen) {
        openingBtt = this;
     }
     
     /* Toggle the aria-hidden state on the overlay and the 
        no-scroll class on the body */
     overlay.setAttribute('aria-hidden', !overlayOpen);
     body.classList.toggle('noscroll', overlayOpen);
     
     /* On some mobile browser when the overlay was previously
        opened and scrolled, if you open it again it doesn't 
        reset its scrollTop property */
     overlay.scrollTop = 0;
     
      /* forcing focus for Assistive technologies but note:
    - if your modal has just a phrase and a button move the
      focus on the button
    - if your modal has a long text inside (e.g. a privacy
      policy) move the focus on the first heading inside 
      the modal
    - otherwise just focus the modal.

    When you close the overlay restore the focus on the 
    button that opened the modal.
    */
    if (overlayOpen) {
       overlay.focus();
    }
    else {
       openingBtt.focus();
       openingBtt = null;
    }

  }, false);

});

/* detect Escape key when the overlay is open */
document.body.addEventListener('keyup', (ev) => {
   if (ev.key === "Escape" && overlay.getAttribute('aria-hidden') === 'false') {
      overlay.setAttribute('aria-hidden', 'true');
      body.classList.toggle('noscroll', false);
      openingBtt.focus();
      openingBtt = null;
   }
})

最后，这是另一个例子，在这个例子中，覆盖通过应用于不透明属性的CSS转换以淡入效果打开。此外，还应用右填充来避免滚动条消失时底层文本的回流。

代码示例(淡出)

CSS

.noscroll { overflow: hidden; }

@media (min-device-width: 1025px) {
    /* not strictly necessary, just an experiment for 
       this specific example and couldn't be necessary 
       at all on some browser */
    .noscroll { 
        padding-right: 15px;
    }
}

.overlay { 
     position: fixed; 
     overflow-y: scroll;
     inset: 0;
}

[aria-hidden="true"] {    
    transition: opacity 1s, z-index 0s 1s;
    width: 100vw;
    z-index: -1; 
    opacity: 0;  
}

[aria-hidden="false"] {  
    transition: opacity 1s;
    width: 100%;
    z-index: 1;  
    opacity: 1; 
}

要防止的行为称为滚动链接。要禁用它，请设置

overscroll-behavior: contain;

在你的CSS覆盖。

如果你想停止body/html滚动添加如下

CSS

    html, body {
        height: 100%;
    }

    .overlay{
        position: fixed;
        top: 0px;
        left: 0px;
        right: 0px;
        bottom: 0px;
        background-color: rgba(0, 0, 0, 0.8);

        .overlay-content {
            height: 100%;
            overflow: scroll;
        }
    }

    .background-content{
        height: 100%;
        overflow: auto;
    }

HTML

    <div class="overlay">
        <div class="overlay-content"></div>
    </div>

    <div class="background-content">
        lengthy content here
    </div>

基本上，你不需要JS也能做到。

主要思想是添加html/body, height: 100%和overflow: auto。 在你的覆盖层中，你可以根据你的需要启用或禁用滚动。

希望这能有所帮助!