我想开发一个滚动功能(在图像上),就像在这个网站上一样 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 包含的图像数量进行调整。
非常感谢你,祝你有美好的一天。
最佳答案
这里的问题是 display: none;
关闭元素的显示,所以它对布局没有影响 ( MDN's words ),这意味着涉及它的任何计算都不会.
following JSFiddle 证明了这一点(您的代码)- 现在两个图像被设置为 display: block;
并且滚动条显示了这一点。
尝试使用 visibility: hidden;
作为 demonstrated here . visibility 叶an elements space occupied虽然没有显示它。它的效果类似于opacity
。
关于javascript - JQuery:滚动图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32527033/