Javascript 如何在第一次触发后停止滚动事件侦听器？

我希望在用户第一次滚动页面时启动滚动事件侦听器，但在一定时间后停止启动，只允许用户正常滚动

以下是我目前如何让它工作的：

var scrollcount = 0

// Scroll event listener

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

var scrollcount=0
//滚动事件侦听器
addEventListener（“滚动”，函数（）{
setTimeout（函数（）{
卷轴数++
如果（滚动计数<40）{
滚动到（0，0）；
}
}, 1200);
});

scrollcount

变量随着滚动而递增，40是指在笔记本电脑的触控板上滚动一次所需的费用。如果计数器小于40，则一旦用户松开滚轮，页面就会向上滚动到页面顶部，如果计数器大于40，则不会

我意识到这是一个非常糟糕的方法，所以我想知道是否有人有一个更可靠的方法来做这件事。我试图让removeEventListener方法在setTimeout完成延迟后关闭事件侦听器，但无法使其以窗口为目标。我认为如果将滚动事件侦听器分配给容器div，而不是窗口，则removeEventListener可以工作，但是当我尝试滚动事件侦听器时，它一开始就不工作

---

如果可能的话，我想避免使用jQuery或任何其他库，但此时我将使用任何能使其可靠工作的方法。

您需要为侦听器命名以删除它：

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

var scrollcount=0
//滚动事件侦听器
函数scrollListener（）{
setTimeout（函数（）{
卷轴数++
如果（滚动计数<40）{
滚动到（0，0）；
removeEventListener（“滚动”，scrollListener）；
}
}, 1200);
});
addEventListener（“滚动”，scrollListener）；

您需要为您的侦听器指定一个名称才能将其删除：

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

var scrollcount=0
//滚动事件侦听器
函数scrollListener（）{
setTimeout（函数（）{
卷轴数++
如果（滚动计数<40）{
滚动到（0，0）；
removeEventListener（“滚动”，scrollListener）；
}
}, 1200);
});
addEventListener（“滚动”，scrollListener）；

这将在用户开始滚动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的函数，并将代码简化为：

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

如果您想在某些动画完成后跳转到页面顶部，而不是等待预定义的时间，那么您应该调用

window.scrollTo（0，0）完成动画制作后。如果使用jQuery设置动画，则可以将回调函数作为最后一个参数传递，动画完成后将调用该函数。例如，您可以执行以下操作：

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

这将在用户开始滚动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的函数，并将代码简化为：

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

如果您想在某些动画完成后跳转到页面顶部，而不是等待预定义的时间，那么您应该调用
window.scrollTo（0，0）完成动画制作后。如果使用jQuery设置动画，则可以将回调函数作为最后一个参数传递，动画完成后将调用该函数。例如，您可以执行以下操作：

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

我可能有误解，但听众不应该在
中删除吗？否则，this将只运行一次，而所有的
scrollcount
内容都是多余的。我可能会误解，但是否应该在
else
中删除侦听器？否则，这将只运行一次，所有的
scrollcount
内容都是多余的。你能解释一下你原来的问题是什么吗？当用户第一次尝试滚动页面时，您是否尝试滚动到页面顶部？是。不过，我不希望它立即触发。用户的第一次滚动会触发一些动画，一旦这些动画完成，我希望窗口跳回页面顶部，然后我希望用户能够自由滚动。我的问题是，我可以让它跳到页面的顶部，然后
scrollcount
阻止它返回顶部，并允许用户滚动，但是这种解决方案对于我的屏幕/触摸板来说太特殊了，它不适用于平板电脑/移动设备/其他计算机。我的问题是：肯定有更好的解决方案吗？看起来很像。你能解释一下你原来的问题是什么吗？当用户第一次尝试滚动页面时，您是否尝试滚动到页面顶部？是。不过，我不希望它立即触发。用户的第一次滚动会触发一些动画，一旦这些动画完成，我希望窗口跳回页面顶部，然后我希望用户能够自由滚动。我的问题是，我可以让它跳到页面的顶部，然后
scrollcount
阻止它返回顶部，并允许用户滚动，但是这种解决方案对于我的屏幕/触摸板来说太特殊了，它不适用于平板电脑/移动设备/其他计算机。我的问题是：肯定有更好的解决方案吗？