Question

如果用户滚动超过一定距离，我希望能够“播放”无限/循环的垂直滚动动画。然后，如果用户向上滚动超过该距离，我想停止播放该动画并将状态重置为原始/开始位置。

我觉得clearInterval可以实现，但是我无法完全解决。

这是我当前的代码： HTML

<div id="list">

  <span>Item 1</span>
  <span>Item 2</span>
  <span>Item 3</span>
  <span>Item 4</span>
  <span>Item 5</span>

</div> <!-- /.list -->

jQuery

const startCycle = () => {

  $('#list').stop().animate({ scrollTop: `${amount}px` }, 400, 'swing', function() {

    // update the order of the elements
    $(this).scrollTop(0).find('span:last').after($('span:first', this))

  })

}

const playAnimation = () => {

  const pixels = window.pageYOffset
  console.log("pixels:", pixels)

  if (pixels >= 30) {
    setInterval(startCycle, 1000)
  } else {
    clearInterval(startCycle)
  }

}

document.addEventListener("scroll", playAnimation)

以下是查看笔的链接：https://codepen.io/anon/pen/vMoJJe

不幸的是，当前动画显得不连贯或卡在上面的if语句中，然后无法停止并向上滚动。目的是停止动画并将其返回到其起始位置，如果用户超过一定距离，则显示第一个span。

初始代码积分：Infinite vertical scroll div element

Answer 1

要清除间隔，您必须保存setInterval的返回值

const playAnimation = () => {

  const pixels = window.pageYOffset
  console.log("pixels:", pixels)

  let interval // declare the variable
  if (pixels >= 30) {
    interval = setInterval(startCycle, 1000) // save the interval ID
  } else {
    clearInterval(interval) // clear the interval ID
  }
}

Answer 2

您遇到的问题是您要不止一次设置间隔。每次触发scroll事件时，都会启动一个间隔。

因此，添加一个布尔值以确保一次只调用一个setInterval()应该可以解决您的问题。

编辑：同样，正如亚历克斯·韦恩（Alex Wayne）所说，您应该将时间间隔保存在变量中，以便以后清除它。

例如：

var interval;
var isIntervalSet = false;
const playAnimation = () => {

  const pixels = window.pageYOffset
  console.log("pixels:", pixels)

  if (pixels >= 30 && !isIntervalSet) {
    interval = setInterval(startCycle, 1000)
    isIntervalSet = true;
  } else {
    clearInterval(interval);
    isIntervalSet = false;
  }

}

document.addEventListener("scroll", playAnimation)

如何使用if语句启动/停止和重置setInterval动画？

2 个答案: