Question

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

在<body>标记的顶部，我有以下内容：

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

然后我有一些<img>标记通过JavaScript切换。

<img id="1" onClick="toggleSelect(1)" src="thumb.jpg" class="small" />
<img id="2" onClick="toggleSelect(2)" src="thumb.jpg" class="small" />
<img id="3" onClick="toggleSelect(3)" src="thumb.jpg" class="small" />

CSS：

#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;
}

图像和背景基本上都有他们的课程切换：

<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>

这一切都很好，你可以在这里看到：

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

鉴于这种情况，有没有简单或方便的方法让图像全屏显示（CSS中设置的高度为90％），无论我当前的滚动位置如何？

提前感谢您的帮助。

Answer 1

当图像为全屏时，请尝试将隐藏设置隐藏到正文：

<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>

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

1 个答案: