Question

我有一个非常简单的功能，可以检测窗口滚动。用户停止滚动时触发超时事件（500毫秒）。然后结束侦听和超时。然后我将窗口动画（GSAP）到某一点。动画完成后，侦听器再次启动。有时...再次检测到滚动，因此整个功能被触发两次。请查看控制台以了解这种情况。

代码在这里：

var timeout;
var onScroll = function() {
  console.log('scrolling...');
  if(timeout) {
    clearTimeout(timeout);
    timeout = null;
  }

  timeout = setTimeout(function () {
    console.log('done scrolling... stop listening...');
    $(window).off( "scroll", onScroll);
    clearTimeout(timeout);
    timeout = null;

    // aniamte scroll
    console.log('start animating scroll...');
    TweenMax.to($(window), 0.1, {scrollTo:{y:500}, onComplete:function(){
      $(window).on( "scroll", onScroll);
      console.log('done animating scroll. Start litening again.');
    }});

  }, 500);
}
$(window).on( "scroll", onScroll);

示例：http://codepen.io/rgbjoy/pen/RGVLBK?editors=0011

这是怎么回事？我应该问量子理论家吗？

Answer 1

看起来你的onComplete函数在scrollTo补间完成之前被调用。

我将onScroll中的控制台日志语句更改为：

console.log('scrolling to ' + window.pageYOffset );

然后我在日志中看到了这个：

"scrolling to 341"
"scrolling to 340"
"scrolling to 338"
"done scrolling... stop listening..."
"start animating scroll..."
"done animating scroll. Start litening again."
"scrolling to 500"
"done scrolling... stop listening..."
"start animating scroll..."
"done animating scroll. Start litening again."

因此，在调用onComplete方法后，“滚动到500”似乎来自补间完成。

我不确定解决方法是什么，因为它似乎是TweenMax中的一个错误。

该窗口无法解释地检测滚动

1 个答案: