Div元素朝相反方向移动会导致滚动条抖动

Div elements moving in opposite directions causes scroll to jitter

本文关键字：滚动条 抖动 移动 元素 反方向 Div      更新时间：2023-09-26

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

我相信这是因为我不断地从每个图像(项目)的视口顶部获得距离。有人知道怎么解决这个问题吗?

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)");
            }
        });
});

提琴添加:https://jsfiddle.net/2bos5oqh/4/

动画是否有动画持续时间?如果是这样，则可能在单个更新完成之前多次触发滚动事件。

尝试取消该函数https://davidwalsh.name/javascript-debounce-function

相关文章：