Javascript 页面滚动显示

我正在尝试重新创建一个交互式图像库，用户在其中单击一个图像，该图像会展开，以便用户看到比原来更大的图像。一切都很顺利，但只要我按下一个图像，它就会展开，页面会变大，背景图像会移动一点，用户就有机会上下左右滚动。出于审美的原因，我不喜欢这样，背景图像的移动对我来说有点怪异。我认为它与显示展开图像的container div的margin属性有关，因为我测试了margin，将其设置为非常高的数字，当数字较高时，它确实在图像底部提供了大量空间。我给你的代码是：

HTML

PS：我确实使用了w3schools网页上的代码。

解决方案： 我认为出于美学考虑，你应该使用一个模式来打开前景中的每个图像。在这里试试这个链接：在那里你可以得到w3学校的情态动词的要点

说明： 当你点击图像时，一切都变得丑陋的原因是100%意味着图像的维度属性（甚至可能不完全相同）。您可以尝试使用固定像素而不是百分比，但这会使其无响应。您可以使用它来考虑视口的宽度和高度，但优雅的解决方案（对于图像库）是使用modals

---

稍后编辑：当我在绝对定位中看到负值时，我的皮肤会爬行。它通常不受欢迎，所以请确保在使用时。

我稍微修改了您的CSS，请尝试以下方法：

/* The grid: Four equal columns that floats next to each other */
.column {
    float: left;
    width: 170;
    margin-left: 10px;
    position: relative;
    left: 20px;
    top: -15px;
}

/* Style the images inside the grid */
.column img {
    opacity: 0.8; 
    cursor: pointer; 
    width: 100px;
    height: 100px;
    margin-top:2px;
}

.column img:hover {     
    opacity: 1;
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}

/* The expanding image container (positioning is needed to position the close button and the text) */
.container {
    position: relative;
    display: none;
    left: 376px;
    top: -230px;
}

/* Closable button inside the image */
.closebtn {
    position: absolute;
    top: 10px;
    left: 500px;
    color: white;
    font-size: 35px;
    cursor: pointer;
}

---

最重要的变化在底部。

我将保留它作为替代方案，因为它非常好。但除此之外，我想找到一个解决当前问题的方法，这样我就可以有两个选项来显示图像。无论如何，非常感谢你！！谢谢你关于负值的注释。我将阅读相关文章！正如我在上面对@dislick说的，我不想在前景中显示照片，尽管这是一个不错的选择，我会记住。那么我想你应该使用我建议的其他东西。请记住，当您使用innerHTML呈现DOM时，它实际上既不是最佳实践，也不是好标准。

<script>
    function myFunction(imgs) {
        var expandImg = document.getElementById("expandedImg");
        var imgText = document.getElementById("imgtext");
        expandImg.src = imgs.src;
        imgText.innerHTML = imgs.alt;
        expandImg.parentElement.style.display = "block";
    }
</script>

/* The grid: Four equal columns that floats next to each other */
.column {
    float: left;
    width: 170;
    margin-left: 10px;
    position: relative;
    left: 20px;
    top: -15px;
}

/* Style the images inside the grid */
.column img {
    opacity: 0.8; 
    cursor: pointer; 
    width: 100px;
    height: 100px;
    margin-top:2px;
}

.column img:hover {     
    opacity: 1;
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}

/* The expanding image container (positioning is needed to position the close button and the text) */
.container {
    position: relative;
    display: none;
    left: 376px;
    top: -230px;
}

/* Closable button inside the image */
.closebtn {
    position: absolute;
    top: 10px;
    left: 500px;
    color: white;
    font-size: 35px;
    cursor: pointer;
}

/* The grid: Four equal columns that floats next to each other */
.column {
    float: left;
    width: 170;
    margin-left: 10px;
    position: relative;
    left: 20px;
    top: -15px;
}

/* Style the images inside the grid */
.column img {
    opacity: 0.8; 
    cursor: pointer; 
    width: 100px;
    height: 100px;
    margin-top:2px;
}

.column img:hover {     
    opacity: 1;
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}

/* The expanding image container (positioning is needed to position the close button and the text) */
.container {
    position: fixed;
    display: none;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.8);
     text-align: center;
}

#expandedImg {
  margin-top: 16px;
}

.closebtn {
  position: absolute;
  top: 16px;
  right: 16px;
  font-size: 32px;
  color: white;
  cursor: pointer;
}