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

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方法關閉事件偵聽器，但無法將其定位到窗口。 我認為，如果將滾動事件偵聽器分配給容器div（而不是窗口），則removeEventListener將起作用，但是當我嘗試首先將滾動事件偵聽器不起作用時。

如果可以的話，我想避免使用jQuery或其他任何庫，但是在這一點上，我將使用使它可靠運行的任何方法。

Answer 1

您需要給監聽器起一個名字，以將其刪除：

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);

Answer 2

從用戶開始滾動起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，則可以使用jQuery的one函數，並將代碼簡化為：

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

如果要在完成某些動畫后跳到頁面頂部而不是等待預定義的時間，則應調用window.scrollTo(0, 0); 完成動畫后。 如果要使用jQuery的effect函數進行動畫處理，則可以將回調函數作為最后一個參數傳遞，動畫完成后將調用該函數。 例如，您可以執行以下操作：

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

看到它住在這里