IntersectionObserver 方法无效 - Javascript

Question

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

任何帮助都会很棒。

代码笔：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 选择器将 background 设置为 blue，比 .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
  },
  box = document.getElementById("box"),
  observer = new IntersectionObserver((entries) => entries
    .forEach(({target: {classList}}) => 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(({target: {classList}, intersectionRatio}) => {
  if(intersectionRatio > 0.5){
    classList.add("active");
  }
  else{
    classList.remove("active");
  }
});

当超过 50% 可见时，这将使 <div> 变为红色。

const config = {
    root: null, // Sets the framing element to the viewport
    rootMargin: "0px",
    threshold: 0.5
  },
  box = document.getElementById("box"),
  observer = new IntersectionObserver((entries) => entries
    .forEach(({target: {classList}, intersectionRatio}) => {
      if(intersectionRatio > 0.5){
        classList.add("active");
      }
      else{
        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;
}

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

IntersectionObserver 方法无效 - Javascript

IntersectionObserver method not working - Javascript

html

javascript

scroll

dom-events

intersection-observer