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。可见性离开an elements space occupied而未显示。它的效果就像opacity。

JQuery：滚动图像

1 个答案: