如何在滚动时向下滚动div（含图像内容）？

我有一个问题，我无法解决，但我真的很高兴，如果有人可以帮助！我想在包含少量图像的div上设置滚动效果（即反向滚动）。更确切地说，图像被随机定位到一个巨大高度的div（滚动条），这个div也被插入另一个div（wrapper =隐藏滚动条）。我想将这个长div的底部放在屏幕顶部（内部有一点偏移），然后允许用户滚动到这个div。滚动时，图像应逐渐下滑至屏幕底部。用户可以从底部滚动到顶部，使图像一个接一个地消失。我做了一些screenshots的预期效果。我尝试了一些'视差滚动'代码，但我无法使它工作，我不确定这是我寻找的最佳解决方案（我只找到背景图像示例）。如何在滚动时向下滚动div（含图像内容）？

下面是相关的代码：

------ 
HTML : 
------ 

<div id="scroller-wrapper"> 
<div id="scroller"> 
    <div id="img-defile1" class="img-defile"> 
     <img src="img/image.jpg"/> 
    </div> 
    ... 
    <div id="img-defile20" class="img-defile"> 
     <img src="img/image20.jpg"/> 
    </div> 
</div> 
</div> 


------ 
CSS : 
------ 

#scroller-wrapper { 
top:0; 
width:102vw; 
height:100%; 
position:absolute; 
overflow-y:scroll; 
overflow-x:hidden; 
} 

#scroller { 
top:-600vw; 
left:0; 
max-width:100%; 
width:60%; 
height:1250%; 
position:relative; 
z-index:800; 
} 

.img-defile { 
display:block; 
max-width:100%; 
height:auto; 
position:absolute; 
overflow:hidden; 
} 

.img-defile img { 
width:600px; 
} 

.custom-scroll { 
height: calc(80% - 20px); 
} 


----------- 
JS/Jquery : 
----------- 

$('#scroller').scroll(function() { 
    if ($(this).scrollTop() > 0) { 
     $('#scroller').addClass("custom-scroll"); 
     } else { 
     $('#scroller').removeClass("custom-scroll"); 
     } 
}); 


$('.img-defile').each(function(i) { 
    $pT=$("#scroller").height(); 
    $pL=$("#scroller").width(); 
    $(this).css({ 
     top:Math.floor(Math.random()*$pT), 
     left:Math.round(Math.random()*$pL) 
     }); 
    });

预先感谢您的回答（S）！

来源

2017-02-24 Marjorie Ober

我只是找一个例子的jsfiddle非常接近的东西我要找的，但是当我申请到我的代码，这是行不通的。有没有人有关我应该如何继续的想法？你可以在这里找到它：http://jsfiddle.net/5UUtV/1/ –

我也在法国问了这个问题Alsacréation平台和Tris TOON帮我解决了这个问题。请按照这link看他的演示。应用并仅涉及CSS部分非常简单。就我而言，我只需要添加'transform：scale（1，-1）;'在我的包装和滚轮上获得预期的效果。

所以一个智者的话！

反正非常感谢，并很快见到你:)

来源

2017-02-28 18:29:27

如何在滚动时向下滚动div（含图像内容）？

回答

相关问题