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

Question

我有一个问题我还不能解决，如果有人能提供帮助，我将非常高兴！我想在包含少量图像的 div 上设置滚动效果（反向滚动）。更准确地说，图像被随机定位到一个具有巨大高度的 div （滚动条）中，这个 div 也被插入另一个 div （包装器=隐藏滚动条）。我想在屏幕顶部制作这个长 div 的底部（内部有一点偏移），然后允许用户滚动到这个 div。滚动时图像应逐渐向下滑动到屏幕底部。用户可以从div的底部滚动到顶部，使图像一个接一个地消失。我做了一些screenshots的预期效果。我尝试了一些 'parallax scrolling' 代码，但我无法让它工作，而且我不确定这是否是我正在寻找的最佳解决方案（我只找到了背景图像示例）。

这是相关的代码片段：

------
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)
      });
  });

预先感谢您的回答！

Answer 1

我也在法语Alsacréation平台上问过这个问题，Tris TOON帮我解决了这个问题。请关注这个link看他的演示。应用起来非常简单，只涉及 CSS 部分。就我而言，我只需要在我的包装器和滚动器上添加 'transform: scale(1, -1);' 即可获得预期效果。

所以对智者说一句话！

非常感谢，很快再见:)

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

How to make a div (with images content) scroll down while scrolling?

scroll

reverse

parallax