带有滚动侦听器的 SetTimeout 方法

Question

我有一个 eventListener("scroll") 函数，当用户向下滚动 25px 时触发 class。如果用户什么都不做，则永远不会触发 class。如果用户从不滚动，我如何设置一个超时函数，该函数将在 5 秒后触发 class？

window.addEventListener("scroll", (e) => {
  let sat = document.querySelector(".hero-images--sat");
  let scrolled = window.pageYOffset;
  const images = document.querySelectorAll(".hero-image");

  if ((scrolled += 25)) {
    sat.classList.add("appear");
  }
  for (let i = 0; i < images.length; i++) {
    let pos = scrolled * images[i].dataset.rate;

    if (images[i].classList.contains("hero-images--earth")) {
      let pos = scrolled * images[i].dataset.rate - 48.75;
      images[i].style.transform = `translate3d(-50%, ${pos}%, 0px)`;
    } else {
      images[i].style.transform = `translate3d(0%, ${pos}%, 0px)`;
    }
  }
});

.appear {
    opacity: 1;
    transition: all 0.3s linear;
    top: 50%;
}

Answer 1

您可以在用户滚动后清除超时。看看这个：

滚动 25px 后 addClass() 将被调用。如果不滚动，5秒后调用

function addClass() {
  let sat = document.querySelector(".hero-images--sat");
  sat.classList.add("appear");
}
let timer = setTimeout(addClass, 5000);
window.addEventListener("scroll", (e) => {  
  let scrolled = window.pageYOffset;
  if (scrolled >= 25) {
    clearTimeout(timer);
    addClass();
  }
});

p {
  height: 100px;
}

.appear {
    background: red;
}

<p>foo</p>
<p class="hero-images--sat">foo</p>
<p>foo</p>
<p>foo</p>
<p>foo</p>
<p>foo</p>
<p>foo</p>
<p>foo</p>

顺便说一句：检查你的条件：if ((scrolled += 25))。 +=可能不是你想要的。

带有滚动侦听器的 SetTimeout 方法

SetTimeout method with scroll listener

javascript

addeventlistener

settimeout