JQuery：滚动图像

我想开发一个像本网站bethellery.com一样的滚动功能（在图像上）。目前，我的代码是有用的，但我有一个主要问题：滚动条的大小几乎和我的div大小一样大，所以我无法滚动那么多。JQuery：滚动图像

下面是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%; 
}

这里是JS：

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的显示样式是none，所以scroll没有检测到第一个图像下的流。

在上面的网站上，滚动条大小明显适应div包含的图像数量。

非常感谢你，祝你有美好的一天。

来源

2015-09-11 v5ono

使用overflow：scroll;可能是 – FreshBits

它不会改变任何东西，谢谢btw的答案。 – v5ono

这里的问题是，display: none;会关闭元素的显示，所以它不会影响布局（MDN's words），这意味着任何涉及它的计算都不会。

这是following JSFiddle（您的代码） - 现在两个图像设置为display: block;，滚动条显示此。

尝试使用visibility: hidden;，而不是demonstrated here。可见性离开an elements space occupied，但未显示。它的效果就像opacity。

来源

2015-09-11 16:43:16

非常感谢您的回答，我正在尝试。还有一些问题，如果我无法修复它们，我会回到你身边。 – v5ono

事实上，可见性选项在设置为隐藏时会留下空白区域。滚动条虽然运行良好。不幸的是，它不是想要的效果。 – v5ono

@ v5ono它确实解决了问题中的问题（即滚动条不响应内部元素），因此如果您喜欢，可以标记为已接受:-) - 如果您有其他问题，请提出另一个问题，但请提出另一个问题确定你检查了建议的问题，因为可能已经有答案了:-) –

JQuery：滚动图像

回答

相关问题