Question

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

这是相关的代码：

------
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（带图像内容）？

1 个答案: