私はウィンドウのスクロールを検出するかなり簡単な機能を持っています。ユーザーがスクロールを停止すると、タイムアウトイベント(500ms)が発生します。これでリスナとタイムアウトが終了します。次に、ウィンドウをある点にアニメート(GSAP)します。アニメーションが完了すると、リスナーが再び起動します。時々...スクロールが再び検出されるので、関数全体が2回起動されます。これが起こるのを見るためにコンソールを見てください。ここウィンドウがスクロールを正確に検出しない
コード:
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
どのようにこの出来事はありますか?私は量子理論家に尋ねるべきですか?
これを深く掘り下げていただきありがとうございます。これはGSAPプラグインのバグかもしれません。私は永遠に頭を叩いていた。私はGSAPプラグインを使いたいのですが、それは他のアニメーションのためにたくさん使うからです。 scrollToプラグインは偉大で使いやすいと聞こえました... – Tom