Div 向相反方向移动的元素导致滚动抖动

Question

我正在创建一个滚动效果，使每个图像在滚动时向相反的方向移动。我已经做到了这一点，但是滚动越多，滚动变得越不平滑，越不稳定。

我相信这是因为我不断地获取每个图像（项目）与视口顶部的距离。有谁知道如何解决这个问题？

var $animatedEls = $(".block-inner");

      $(window).scroll(function(e) {
        e.preventDefault();
        var scrollTop = $(window).scrollTop();
        var offset = 0;

        // Loop through each image (.block-inner)
        $.each($animatedEls, function(i, item) {

            // Get offset for each .inner-block
            offset = $(item).offset().top - scrollTop;

            console.log(i+') '+offset);

            // Apply to every second item
            if (i % 2) {
                $(item).css("transform","translateY(-" +  (offset/20)  + "px)");
            } else {
                $(item).css("transform","translateY(" +  (offset/20)  + "px)");
            }
        });

});

Fiddle 添加：https://jsfiddle.net/2bos5oqh/4/

Answer 1

动画有动画时长吗？如果是这样，则可能是滚动事件在单次更新完成之前触发了多次。

尝试去抖函数 https://davidwalsh.name/javascript-debounce-function

Div 向相反方向移动的元素导致滚动抖动

Div elements moving in opposite directions causes scroll to jitter

javascript

jquery

scroll

transform

translate