jquery - 当元素在上面延迟加载时，将注意力集中在元素上 - jquery scrollTop

Question

我们懒加载页面的几个元素。

但是，在顶部，我们对页面上的最后一个元素（UI 选项卡中的 iframe）进行了行动号召。CTA 使用scrollTop.

在我的点击功能中

$('html,body').animate({scrollTop: $("#customerReviews").offset().top}, 700, "easeInOutSine");

问题是当滚动被触发时，它也会在项目进入视口时触发延迟加载。因此，目标进入视野，然后在项目完成上面的延迟加载时被推出视野。

有什么好的方法可以解决这个问题吗？

Answer 1

我会创建一个 isAnimating 布尔变量来跟踪您何时为页面设置动画。

在您的动画调用之前将 isAnimating 设置为 true，并在动画回调中将其设置回 false。

我不确定你是如何调用延迟加载的，但是当 isAnimating 设置为 true 时，你必须设置一些不运行的条件。

isAnimating = true;
$('html,body').animate({scrollTop: $("#customerReviews").offset().top}, 700, "easeInOutSine", function(){
      isAnimating = false;
});