javascript - 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%;
}

这是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 的显示样式为空，滚动没有检测到第一张图片下的流。

在上面的网站上，滚动条的大小显然会根据 div 包含的图像数量进行调整。

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

Answer 1

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

following JSFiddle 证明了这一点(您的代码)- 现在两个图像被设置为 display: block; 并且滚动条显示了这一点。

尝试使用 visibility: hidden; 作为 demonstrated here . visibility 叶an elements space occupied虽然没有显示它。它的效果类似于opacity。