最初のトリガー後にスクロールイベントリスナーを停止する方法はありますか？

Question

スクロールイベントリスナーは、ユーザーが最初にページをスクロールした後、特定の時間が経過した後にファイアリングを停止して、スクロールを正常にスクロールできるようにする場合があります。ここで

は、私は現在、それが働いて持っている方法は次のとおりです。

var scrollcount = 0 

// Scroll event listener 

    window.addEventListener("scroll", function() { 
    setTimeout(function() { 
    scrollcount ++ 
    if (scrollcount < 40) { 
     window.scrollTo(0, 0); 
    } 
}, 1200); 
    }); 

scrollcount変数ずつスクロールと一緒に、および40は、それが私のラップトップのトラックパッド上で1つのスクロールのために占めるどのくらいです。カウンターが40未満の場合、ユーザーがスクロールホイールを離すとページはページの一番上にスクロールされます.40を超えるとスクロールホイールは移動しません。

これは本当に悪いことだと私は認識しています。だから、誰かがもっと信頼できる方法を持っているのだろうかと思っています。私は、removeEventListenerメソッドがsetTimeoutが遅延を終了すると、イベントリスナーをオフにしようとしましたが、ウィンドウをターゲットにすることができませんでした。私は、removeEventListenerは、スクロールイベントリスナーがコンテナdivに割り当てられていて、ウィンドウではなく、スクロールイベントリスナーが最初に機能しないことを試みたときに機能すると思います。

可能であれば、jQueryやその他のライブラリを避けたかったのですが、この時点では確実に動作するようなものを使用します。

Answer 1

これは、ユーザーがスクロールを開始したときから、2秒後に、ページの一番上にジャンプします。

/* Create a one-time event */ 
function onetime(node, type, callback) { 
    node.addEventListener(type, function(e) { 
     e.target.removeEventListener(e.type, arguments.callee); 
     return callback(e); 
    }); 
} 

onetime(document, 'scroll', function(e) { 
    setTimeout(function(){ window.scrollTo(0, 0); }, 2000); 
}); 

あなたはjQueryのを使用している場合see it live here

、あなたはjQueryのone機能を使用して、にコードを簡素化することができます。

$(document).one('scroll', function(e) { 
    setTimeout(function(){ window.scrollTo(0, 0); }, 2000); 
}); 

アニメーションが完了してから所定の時間待機するのではなく、一部のアニメーションが終了した後にページの先頭にジャンプしたい場合は、window.scrollTo(0, 0);に電話をかけてください。 jQueryのeffect functionsを使ってアニメーション化している場合は、最後の引数としてコールバック関数を渡すことができ、アニメーションが完了すると呼び出されます。

$(document).one('scroll', function(e) { 
    $('pre').animate(
    {fontSize: "106px"}, 
    2000, 
    function(){ window.scrollTo(0, 0); } 
); 
}); 

see it live here

Answer 2

は、あなたはそれを削除するには、あなたのリスナーに名前を付ける必要があります。

var scrollcount = 0 

// Scroll event listener 

function scrollListener() { 
    setTimeout(function() { 
    scrollcount ++ 
    if (scrollcount < 40) { 
     window.scrollTo(0, 0); 
     window.removeEventListener("scroll", scrollListener); 
    } 
    }, 1200); 
}); 
window.addEventListener("scroll", scrollListener);