在页面滚动时以不同的速度滚动项目

Question

我有一个包含三行缩略图的页面。每个图像的宽度相同，但高度会有所不同，因此在滚动页面时，所有行都会在不同的时间结束。我正在寻找一种方法让每一行以不同的速度滚动，以便它们在页面底部一起结束。有点像垂直视差效果。这甚至可能吗？

我的HTML看起来像这样：

<div id="thumbnails">
  <ul id="row-one">
    <li class="thumb1">...</li>
    <li class="thumb2">...</li>
  </ul>  
  <ul id="row-two">
    <li class="thumb1">...</li>
    <li class="thumb2">...</li>
    <li class="thumb3">...</li>
    <li class="thumb4">...</li>
  </ul>  
  <ul id="row-three">
    <li class="thumb1">...</li>
    <li class="thumb2">...</li>
    <li class="thumb3">...</li>
  </ul>  

和我的css：

#thumbnails { width: 100%; }
ul { float: left; display: inline; width: 33%; }

Answer 1

您可以使用jQuery .scroll函数。查看文档here。

触发滚动时，以不同的速度移动目标。

做你在视差滚动上做的事情，但是垂直，你可能已经知道很多教程。

希望这有任何帮助。