JQuery: Прокрутка изображений

Question

Я хотел бы разработать функцию прокрутки (по изображениям), как на этом сайте bethellery.com. На данный момент мой код работает, но у меня серьезная проблема: размер прокручивающей полосы почти такой же большой, как и размер моего div, поэтому я не могу прокрутить это.

Вот HTML:

<div id="container"> 
    <div class="img-inner" id="img-1" style="display: block" > 
     <img class="img" src="src-1" alt="alt-1" />  
    </div> 

    <div class="img-inner" id="img-2" style="display: none" > 
     <img class="img" src="src-2" alt="alt-2" />  
    </div> 

    <div class="img-inner" id="img-3" style="display: none" > 
     <img class="img" src="src-3" alt="alt-3" />  
    </div> 

    <div class="img-inner" id="img-4" style="display: none" > 
     <img class="img" src="src-4" alt="alt-4" />  
    </div> 
</div> 

Вот CSS:

html, body { 
    margin: 0px; 
    padding: 0px; 
    height: 100%; 
} 

#container { 
    height: 100%; 
    width: 50%; 
    overflow-y: auto; 
} 

.img-inner{ 
    height: 100%; 
    width: 100%; 
} 

.img { 
    height: 100%; 
    width: 100%; 
} 

Вот это ЯШ:

var lastScrollTop = 0; 
var x = 1; 

$('#container').scroll(function(event){ 
    var st = $(this).scrollTop(); 

    if(st > lastScrollTop){ 
     //downscroll code  
     document.getElementById('img-'+x).style.display = "none"; 
     //if next image isn't the last image 
     if((x+1) !== 4){ 
      x=x+1; 
     } 
     document.getElementById('img-'+x).style.display = "block"; 
    } 
    else{ 
     document.getElementById('img-'+x).style.display = "none"; 
     if((x-1) !== 0){ 
      x=x-1; 
     } 
     document.getElementById('img-'+x).style.display = "block"; 
    } 
    lastScrollTop = st; 
}); 

Я действительно не знаю, что происходит, но Я думаю, из-за того, что стили отображения div не равны, прокрутка не обнаруживает поток под первым изображением.

На приведенном выше рисунке размер полосы прокрутки четко адаптируется к числу изображений, которые содержит div.

Большое спасибо и у нас отличный день.

Answer 1

Проблема заключается в том, что display: none; отключает отображение элемента, поэтому он не влияет на компоновку (MDN's words), что означает, что любые вычисления, которые его включают, просто не будут.

Это продемонстрировано following JSFiddle (ваш код) - теперь два изображения установлены на display: block;, и полоса прокрутки показывает это.

Попробуйте использовать visibility: hidden; вместо demonstrated here. Видимость оставляет an elements space occupied, не показывая его. Эффект подобен opacity.