全屏圖像視圖不滾動

我已經創建了一個全屏幕的圖像瀏覽器如下...全屏圖像視圖不滾動

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

全屏圖像視圖不滾動

回答

相關問題