全屏图像视图不滚动

我已经创建了一个全屏幕的图像浏览器如下...全屏图像视图不滚动

在我<body>标签的顶部后正常运作，我有以下：

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

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

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

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

不过，如果我向下滚动，然后切换图像，你可以看到它的问题：

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

在此先感谢您的帮助。

来源

2017-08-09 Microsis

你能创建一个小提琴？作为一个直觉，我会研究vw和vh单位，它是窗口宽度/高度的一个百分比 – derp

是带位置的img.big：绝对位置是容器内的位置：relative？ – thehuijb

试图通过设置溢出隐藏的身体，当图像全屏：

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

来源

2017-08-09 07:09:00 kastriotcunaku

这工作完美！谢谢！ – Microsis

全屏图像视图不滚动

回答

相关问题