javascript - 如何在网页上水平滚动时为列表项或 div 元素设置动画？

Question

我正在尝试使用同位素插件构建一个画廊，并且我正在使用 masonryHorizo​​ntal 布局。所有图像都放在一个无序列表中，在它下面我有 li，它还有一个 anchor 标签和一个嵌套的图像标签。

<ul>
 <li><a href="#"><img src="#></a></li>
  ...
</ul>

布局工作正常，即图像以最佳方式自行对齐，留下非常少的空白(通过同位素完成)，但我希望在水平滚动时有动画。 我找了一天，没有找到任何实质性的东西。感谢您的帮助。

Answer 1

我不知道你的插件。但是，如果您尝试在页面上使用 jQuery 检测横向滚动(不是某些特定于插件的滚动)，请尝试一下:

    var lastScrollLeft = 0;
    $(window).scroll(function() {
        var documentScrollLeft = $(document).scrollLeft();
        if (lastScrollLeft != documentScrollLeft) {
            console.log('scroll x');
            lastScrollLeft = documentScrollLeft;
        }
    });

那应该检测滚动位置是否仍然相同。然后您可以进行相应的更改。

如果那不是你所说的滚动的意思。然后没关系:)

代码片段来自这个答案:

https://stackoverflow.com/a/7076832/3767100