首先显示 div 而不滚动

Question

我正在制作一个画廊，并设法通过单击两个单独的按钮来打开和关闭它。但是，当打开时，我希望它位于所有内容、页面的完整宽度和高度之上，并且无法滚动原始 html（例如，当您在 facebook 上打开图片时）。目前，当我尝试将其定位为绝对或固定时，它只会跳转到页面顶部，我仍然可以滚动浏览 html 的其余部分。

打开的画廊的 html

<div class="container" id="container-one">

        <div class="gallery">
            <img src="1.jpg" style="max-width:100%">
        </div>
      
        <div class="gallery">
            <img src="2.jpeg" style="max-width:100%">
        </div>
    
        <a class="close" onclick="Closed()">&#10006;</a>    
</div>

还有CSS

.container {
    display: none;
    position: absolute;
}

.gallery {
    display: none;
    height: fit-content;
    width: 99vw;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.6);
    background-size: 100%;
    z-index: 1300;
    text-align: center;
  }

为了打开和关闭它，我使用 style.display 从 none 更改为 block。

我在网上看了，但只能找到整个画廊的代码，有一百行，我不知道是哪一部分。

Answer 1

键可能是 CSS 中的 overflow 值。当 overflow 在 body 上为 hidden 时，滚动被禁用。请参阅this questions 了解禁用滚动。

这个 CSS 将把你的元素放在最重要的位置，并且放在整个页面上

.container {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 10; /*This must be the highest z-index value of your page to be above all*/
    width: 100%;
    height: 100%;
}

要动态禁用/启用滚动，您可以使用：

function disableScroll() {
    let body = document.querySelector("body")
    body.style.height = "100%" // Make sure the height is fixed
    body.style.overflow = "hidden" // Hide the overflow = disable scrolling
}

function enableScroll() {
    let body = document.querySelector("body")
    body.style.overflow = ""
}