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则不会。“/ p>

我意识到这是一个非常糟糕的方法，所以我想知道是否有人有更可靠的方法来做到这一点。一旦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);
});

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

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

2 个答案: