如何在第一次觸發後停止滾動事件監聽器？

Question

我想要一個滾動事件監聽器，當用戶第一次滾動頁面時觸發，但隨後在一段時間後停止觸發，並允許用戶正常滾動。

下面是我當前如何得到它的工作：

var scrollcount = 0 

// Scroll event listener 

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

的scrollcount變量增量滾動一起，和40大約是多少需要爲一個滾動在我的筆記本電腦的觸控板。如果計數器低於40，那麼一旦用戶放開滾輪，頁面就會滾動回頁面的頂部，如果超過了40，則不會。

我意識到這是一個非常糟糕的方式來解決這個問題，所以我想知道是否有人有更可靠的方法來做到這一點。一旦setTimeout完成其延遲，我試圖讓removeEventListener方法關閉事件監聽器，但是我無法將它定位到窗口。我認爲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); 
}); 

see it live here

如果你使用jQuery，您可以使用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);