javascript - 括号 - 为什么 IntersectionObserver 没有响应？

Question

我是 Web 开发的初学者，我正在使用 Brackets。最近我遇到了几个与javascript相关的问题。其中之一是我试图延迟加载一个带有文本的 div。结果我得到的只是一个空白页。
另外，正如你在 js 代码中看到的，我尝试在 IntersectionObserver 函数中添加一个“警报”，并且令人惊讶的是，没有弹出任何消息。

代码：

/*eslint-env es6*/
/*eslint-env browser*/
   
const faders = document.querySelectorAll(".fade-in");
const sliders = document.querySelectorAll(".slide-in");

const appearOptions = {
  threshold: 0,
  rootMargin: "0px 0px -250px 0px"
};


const appearOnScroll = new IntersectionObserver(function(
  entries,
  appearOnScroll
) {
  entries.forEach(entry => {
      alert("error");
    if (!entry.isIntersecting) {
      return;
    } else {
      entry.target.classList.add("appear");
      appearOnScroll.unobserve(entry.target);
    }
  });
},
appearOptions);

faders.forEach(fader => {
  appearOnScroll.observe(fader);
});

sliders.forEach(slider => {
  appearOnScroll.observe(slider);
});

.FadeIn{
    opacity: 0;
    transition: opacity 250ms ease-in;
}
.FadeIn.appear{
    opacity: 1;
}

<div class="FadeIn">
        <h4> Some text .. </h4>
        </div>

我在做什么错？，任何帮助将不胜感激！

标签： javascripthtmlcss

Answer 1

在您的 html 和 css 中，该类称为FadeIn，而在 Javascript 中，它称为fade-in。如果你解决这个问题，它似乎有效：

const faders = document.querySelectorAll(".fade-in");
const sliders = document.querySelectorAll(".slide-in");

const appearOptions = {
  threshold: 0,
  rootMargin: "0px 0px -250px 0px"
};


const appearOnScroll = new IntersectionObserver(function(
  entries,
  appearOnScroll
) {
  entries.forEach(entry => {
    if (!entry.isIntersecting) {
      return;
    } else {
      entry.target.classList.add("appear");
      appearOnScroll.unobserve(entry.target);
    }
  });
},
appearOptions);

faders.forEach(fader => {
  appearOnScroll.observe(fader);
});

sliders.forEach(slider => {
  appearOnScroll.observe(slider);
});

.fade-in{
    opacity: 0;
    transition: opacity 250ms ease-in;
}
.fade-in.appear{
    opacity: 1;
}

<div class="fade-in">
  <h4> Some text .. </h4>
</div>