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

Question

我正在尝试使用同位素插件来建立画廊，而我正在使用masonryHorizo​​ntal布局。 所有图像都放置在一个无序列表中，在该列表下，我有li，该li还具有锚标记和嵌套的图像标记。

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

布局工作正常，即图像进行了最佳对齐，从而留出了很少的白色空间（通过同位素完成），但是我想在水平滚动时显示动画。 我搜寻了一天，却找不到任何实质内容。 任何帮助表示赞赏。

Answer 1

我不知道您的插件。 但是，如果您尝试使用Page上的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