Javascript 滚动后，全屏图像视图无法正常运行

我创建了一个全屏图像查看器，如下所示

在我的

标签顶部，我有以下内容：

<div id="backdrop" class="hide"></div>

图像和背景基本上可以切换其类别：

#backdrop {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: #000;
    z-index: 1000000;
}

.hide {
    display: none;
}

.show {
    display: block;
}

img.small {
    cursor: pointer;
    position: relative;
    height: 300px;
    width: auto;
    z-index: 999999;
}

img.big {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 90%;
    z-index: 1000001;
}

切换选择：功能（索引）{
如果（图像[索引].选中）
{           
$（“#”+索引）.addClass（'small'）；
$（“#”+索引）.removeClass（'big'）；
$（“#背景”）.addClass（'hide'）；
$（“#背景”）.removeClass（'show'）；
图像[索引]。所选=假；
}
否则{
$（“#”+索引）.addClass（'big'）；
$（“#”+索引）.removeClass（'small'）；
$（“#背景”）.addClass（'show'）；
$（“#背景”）.removeClass（'hide'）；
图像[索引]。选定值=真；
}
}

这一切都很好，正如您在这里看到的：

但是，如果我向下滚动然后切换图像，您会发现它有问题：

在这种情况下，是否有任何简单或方便的方法使图像全屏显示（CSS中设置的90%高度），而不考虑我当前的滚动位置

---

提前感谢您的帮助。

当图像全屏显示时，尝试将溢出隐藏设置为body：

<script type="text/javascript">
toggleSelect: function(index) {
    if (images[index].selected)
    {           
        $("#"+index).addClass('small');
        $("#"+index).removeClass('big');

        $("#backdrop").addClass('hide');
        $("#backdrop").removeClass('show');

        images[index].selected = false;
    }
    else {
        $("#"+index).addClass('big');           
        $("#"+index).removeClass('small');

        $("#backdrop").addClass('show');
        $("#backdrop").removeClass('hide');

        images[index].selected = true;
    }
}
</script>

切换选择：功能（索引）{
如果（图像[索引].选中）
{           
$（“#”+索引）.addClass（'small'）；
$（“#”+索引）.removeClass（'big'）；
$（“#背景”）.addClass（'hide'）；
$（“#背景”）.removeClass（'show'）；
$（'html，body'）.css（{overflow:'auto'}）；
图像[索引]。所选=假；
}
否则{
$（“#”+索引）.addClass（'big'）；
$（“#”+索引）.removeClass（'small'）；
$（“#背景”）.addClass（'show'）；
$（“#背景”）.removeClass（'hide'）；
$（'html，body'）.css（{overflow:'hidden'}）；
图像[索引]。选定值=真；
}
}

您能创建小提琴吗？作为一种直觉，我会研究vw和vh单位，它是窗口宽度/高度的百分比。img大，位置：绝对，容器内，位置：相对？

<script type="text/javascript">
toggleSelect: function(index) {
    if (images[index].selected)
    {           
        $("#"+index).addClass('small');
        $("#"+index).removeClass('big');

        $("#backdrop").addClass('hide');
        $("#backdrop").removeClass('show');

        images[index].selected = false;
    }
    else {
        $("#"+index).addClass('big');           
        $("#"+index).removeClass('small');

        $("#backdrop").addClass('show');
        $("#backdrop").removeClass('hide');

        images[index].selected = true;
    }
}
</script>

<script type="text/javascript">
toggleSelect: function(index) {
    if (images[index].selected)
    {           
        $("#"+index).addClass('small');
        $("#"+index).removeClass('big');

        $("#backdrop").addClass('hide');
        $("#backdrop").removeClass('show');

        $('html, body').css({overflow: 'auto'});

        images[index].selected = false;
    }
    else {
        $("#"+index).addClass('big');           
        $("#"+index).removeClass('small');

        $("#backdrop").addClass('show');
        $("#backdrop").removeClass('hide');

        $('html, body').css({overflow: 'hidden'});

        images[index].selected = true;
    }
}
</script>