IntersectionObserver方法不起作用-Javascript

Question

我有一个div，当它滚动到视口时，我想更改颜色，而我正在尝试使用新的junctionObserver方法实现这一点。我已经在config回调中设置了参数，但是似乎无法让观察者自己添加类来更改背景颜色？

任何帮助都将是惊人的。

codepen：https：//codepen.io/emilychews/pen/mXVBVK

const config = {
  root: null, 	// sets the framing element to the viewport
  rootMargin: '0px',
  threshold: 0.5
};

const box = document.getElementById('box');

let observer = new IntersectionObserver(function(entries) {
  observer.observe(box);
  entries.forEach(function(item){
    item.classList.add("active");
  });
}, config);

body {
  margin: 0; padding: 0;
  display:flex;
  justify-content: center;
  align-items: center;
  height: 300vh;
}

#box {
  width: 100px; 
  height: 100px;
  background: blue;}

.active {background: red;}

<div id="box"></div>

Answer 1

IntersectionObserver每当交集发生变化时，都会调用构造函数中的函数。你不能放在observer.observe(box);里面。

另外，item这不是DOM元素吗？—它是一个IntersectionObserverEntry，因此您不能.classList在其上使用。您可能想解决item.target。

即使以上内容已得到纠正，您的CSS也不会更改，因为您已使用#box选择器将to设置background为blue，而to的特异性比更高.active。一个简单的办法就是改变#box以.box和为HTML使用<div id="box" class="box"></div>来代替。

正确的代码将如下所示：

const config = {
  root: null, // sets the framing element to the viewport
  rootMargin: '0px',
  threshold: 0.5
};

const box = document.getElementById('box');

let observer = new IntersectionObserver(function(entries) {
  entries.forEach(function(item) {
    item.target.classList.add("active");
  });
}, config);

observer.observe(box);

body {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300vh;
}

.box {
  width: 100px;
  height: 100px;
  background: blue;
}

.active {
  background: red;
}

<div id="box" class="box"></div>

现在，您需要在回调内部添加一些逻辑：

entries.forEach(function(item){ console.log(item);
  if(item.intersectionRatio > 0.5){
    item.target.classList.add("active");
  }
  else{
    item.target.classList.remove("active");
  }
});

这将使得<div>当> 50％吧是可见的红色。

entries.forEach(function(item){ console.log(item);
  if(item.intersectionRatio > 0.5){
    item.target.classList.add("active");
  }
  else{
    item.target.classList.remove("active");
  }
});

const config = {
  root: null, // sets the framing element to the viewport
  rootMargin: '0px',
  threshold: 0.5
};

const box = document.getElementById('box');

let observer = new IntersectionObserver(function(entries) {
  entries.forEach(function(item) {
    if (item.intersectionRatio > 0.5) {
      item.target.classList.add("active");
    } else {
      item.target.classList.remove("active");
    }
  });
}, config);

observer.observe(box);

body {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300vh;
}

.box {
  width: 100px;
  height: 100px;
  background: blue;
}

.active {
  background: red;
}