logo标签列表

当叠加层出现时防止背景滚动

javascripthtmlcssscrolloverlay
20

我使用CSS编写了自己的模态框类，并已成功地在我的应用程序中使用它。但是，我面临的问题是当叠加层打开时，我仍然可以滚动背景内容。当我的模态框/叠加层打开时，如何停止滚动背景内容？

这是我的模态框，它会在叠加层的上方打开。

<div>
  <div className="overlay"></div>
  {this.props.openModal ?
  <div>
    <div className="polaroid sixten allcmnt_bg_clr horiz_center2">
      {}
      <div className="mobile_header">
        <PostHeader/>
      </div>
      <div className="mobile_renderPost">
        { this.renderPostType() }
      </div>
      <div className="mobile_post_bottom"></div>
    </div>
  </div> : null}
</div>

我的叠加层CSS

.overlay {
  background-color: rgba(0, 0, 0, .70);
  position: fixed;
  width: 100%;
  height: 100%;
  opacity: 1;
  left: 0;
  right: 0;
  -webkit-transition: opacity .25s ease;
  z-index: 1001;
  margin: 0 auto;
}
1
可能是防止模态框打开时BODY滚动的重复问题。 - adeltahir
7个回答
31

一种方法是隐藏body元素的溢出。

像这样：


body.modal-open{
    overflow:hidden;
}

所以在这种情况下，当你弹出模态框时，你需要给body添加一个类，然后当你关闭它时，你需要移除该类。

另一种方法是使用JavaScript来禁用滚动，如下所示：

   document.documentElement.style.overflow = 'hidden';
   document.body.scroll = "no";

然后将其返回

 document.documentElement.style.overflow = 'scroll';
 document.body.scroll = "yes";
@MRSafari，“scroll”在body上有效吗？我不认为我在HTML5规范中找到它。 - Ethan
@Ethan 实际上它并没有添加滚动属性，而是溢出属性。然而我不知道为什么在js属性中被称为滚动。 - M.R.Safari
很遗憾，在iOS 15中无法工作。仍在滚动... - JKB
6
我也遇到了这个问题，尝试了所有的答案，从将高度设置为100%或100vh和overflow:hidden的body元素。这给我带来了一些问题，其中一个是使用100vh隐藏溢出时，每次点击汉堡包菜单按钮页面都会跳转到顶部。
解决方案：将overflow:hidden属性添加到html标签中。这个方法非常完美，可以打开菜单，防止页面滚动，并保持用户停留在当前页面，不会发生跳转。
由于看起来你正在使用React，这里是我用它的示例：
.lock-scroll {
  overflow: hidden;
}


const [open, setOpen] = useState(false)
useEffect(() => {
  const html = document.getElementsByTagName('html')[0]

  if (open) {
    html.classList.add('lock-scroll')
  } else {
    html.classList.remove('lock-scroll')
  }
  return (): void => {
    html.classList.remove('lock-scroll')
  }
}, [open])
这个很好用，但是浏览器滚动条会隐藏，导致背景跳动。你有解决方法吗？ - John Naegle
将overflow:hidden属性添加到html标签中，这是一个非常好的解决方案。 谢谢。 - Byeongin Yoon
5
当您打开模态窗口时，可以将overflow: hidden;添加到body标签的样式中。
或者，
body.modal-opened {
   overflow: hidden;
}

打开对话框时，将 modal-opened 类添加到 body 中，在关闭对话框时将其删除。

最简单、最聪明的方式 - Ram kumar
我相信这在iPhone的Safari上有问题。 - Austin Jones
3
使用JavaScript向body添加类：

overflow:hidden;

这个方法在大部分情况下适用，但我认为在iPhone上的Safari浏览器仍然会因为Touch Move而产生轻微抖动，需要采取类似以下的措施。

function handleTouchMove(e)
{
  e.preventDefault();
}
function lockscreen()
{
  var body = document.getElementById("body");
  body.className += " lock-screen";
  body.addEventListener('touchmove', handleTouchMove, false);
}
function unlock()
{
  var body = document.getElementById("body");
 body.classList.remove("lock-screen");
 body.removeEventListener('touchmove', handleTouchMove);
}

停止用户继续滚动。
4
应该用 document.body。除非你的 <body> 元素有 id="body"，否则 document.getElementById("body") 无法正常工作。 - Matt Browne
3

将overflow: hidden解决方案与现代技术结合使用，效果完美。

html:has(dialog[open]) {
  /* remove the main scrollbar when dialog is open */
  overflow: hidden;
}
1
当模态框打开时，隐藏页面的x/y滚动条。
.no-scroll {
    overflow: hidden;
}

使用JavaScript将类添加到body标签中：
<body class="no-scroll">

</body>

一旦您关闭模态框，请删除该类。

0
到目前为止（2022年10月），所有的答案都建议在打开模态框/弹出窗口时动态地将overflow: hidden添加到“body”或“html”中。如果“html”或“body”实际上是您的滚动元素，并且修复了position: fixed元素的有些反直觉的过度滚动行为，则此方法有效。
我尝试使用overscroll-behavior来解决这个问题，这可能有效，但需要在您的模态框中使用可滚动元素（具有实际溢出），如果用户只是决定在“锁定”的元素之外触摸您的覆盖层，则不太可靠。
根据您的页面设计，还有另一种选项，需要将内容和覆盖层分开，并将“html”和“body”的高度明确设置为100%。以下是一个完整的示例：
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        * {
            box-sizing: border-box;
        }
        body {
            position: relative;
            margin: 0;
            padding: 0;
            font-family: sans-serif;
            font-size: 16px;
        }
        .content {
            padding: 32px;
            border: 1px solid #000;
        }
        .overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, .5);
            backdrop-filter: blur(5px);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1001;
        }
        .info-box {
            background: #000;
            color: #eee;
            border-radius: 5px;
            width: 240px;
            height: 240px;
            padding: 16px;
        }
        
        /* scroll fix */
        html, body {
            height: 100%;
        }
        .content {
            max-height: 100%;
            overflow-y: auto;
        }
    </style>
</head>
<body>
    <div class="content">
        <h2>Overlay Background Scroll Test</h2>
        <p>Use a window size of around 320x480 for optimal testing (e.g. via device-toolbar).</p>
        <h3>Scrollable Page</h3>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
        <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
        <button onclick="document.querySelector('.overlay').style.display='flex';">open</button>
    </div>
    <div class="overlay">
        <div class="scroll-fix">
            <div class="info-box">
                <h3>Pop-Up Message</h3>
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
                <button onclick="document.querySelector('.overlay').style.display='none';">close</button>
            </div>
        </div>
    </div>
</body>

重要的部分是最后一个 CSS 条目。这将使您的 .content 元素成为主滚动元素：
html, body {
    height: 100%;
}
.content {
    max-height: 100%;
    overflow-y: auto;
}

这种方法的缺点是：大多数移动浏览器将无法通过滚动自动隐藏其URL栏，因为这似乎取决于html或body元素的滚动 :-(。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接