IntersectionObserver 在不显示时始终显示为“in view”

Question

我正在尝试让IntersectionObserver 为我的页面工作。 HTML 看起来像：

<div id="feature-blocks">
    <div class="block left">
        <img src="/2022/css/sass/font-awesome/pngs/black/48/solid-icons.png" />
        <h2>Lots of Digital Images</h2>
        <p>foo bar</p>
    </div>
    <div class="block bottom">
            <img src="/2022/css/sass/font-awesome/pngs/black/48/solid-object-group.png" />
            <h2>Online Graphics Editor</h2>
            <p>foo bar</p>
    </div>
    <div class="block right">
            <img src="/2022/css/sass/font-awesome/pngs/black/48/solid-copyright.png" />
            <h2>Copyright Safe Images</h2>
            <p>foo bar</p>
    </div>
    <div class="block left">
            <img src="/2022/css/sass/font-awesome/pngs/black/48/solid-laptop.png" />
            <h2>Access From Any Device</h2>
            <p>foo bar</p>
    </div>
    <div class="block bottom">
            <img src="/2022/css/sass/font-awesome/pngs/black/48/solid-grin-hearts.png" />
            <h2>Unlimited Access</h2>
            <p>foo bar</p>
    </div>
    <div class="block right">
            <img src="/2022/css/sass/font-awesome/pngs/black/48/solid-handshake.png" />
            <h2>Commercial Use</h2>
            <p>foo bar</p>
    </div>

</div>

我的 JS 是：

const features_blocks = document.querySelectorAll('#feature-blocks .block');
var observer_features = new IntersectionObserver( entries => {
      entries.forEach(entry => {
        console.log("TEST: "+ entry.intersectionRatio);
        if (entry.intersectionRatio > 0) {
          console.log('in the view');
        } else {
          console.log('out of view');
        }
      });
    }, { root: document.querySelector('#feature-blocks'), rootMargin: '0px', threshold: 0.5 }
);

features_blocks.forEach(f => {
observer_features.observe(f);
});

问题是，即使不是，它也总是显示为“可见”！

我尝试过使用阈值，但似乎没有什么不同。我究竟做错了什么？

我看到的一个例子：https://jsfiddle.net/youradds/7ad34ebh/4/（滚动时查看控制台日志）

Answer 1

const features_blocks = document.querySelectorAll('.feature-blocks');
var observer = new IntersectionObserver(entries => {
  entries.forEach((entry) => {
    const block = entry.target.querySelector('.block');
    if (entry.isIntersecting) {
      console.log('in the view');
    } else {
      console.log('out of view');
    }
  });
});

observer.observe(document.querySelector('.feature-blocks'));

document.addEventListener('DOMContentLoaded', function() {
  Array.from(features_blocks).forEach(function(element) {
    console.log(features_blocks);
    observer.observe(element);
  });
});

#feature {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin-top: 1rem;
  .block {
    margin-top: 1rem;
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    img {
      max-width: 100%;
      align-self: center;
    }
  }
}

<div id="feature">
  <div class="feature-blocks">
    <div class="block left">
      <img src="https://picsum.photos/200/200" />
      <h2>Lots of Digital Images</h2>
      <p>foo bar</p>
    </div>
  </div>
  <div id="feature-blocks">
    <div class="block bottom">
      <img src="https://picsum.photos/200/200" />
      <h2>Online Graphics Editor</h2>
      <p>foo bar</p>
    </div>
  </div>
  <div class="feature-blocks">
    <div class="block right">
      <img src="https://picsum.photos/200/200" />
      <h2>Copyright Safe Images</h2>
      <p>foo bar</p>
    </div>
  </div>
  <div class="feature-blocks">
    <div class="block left">
      <img src="https://picsum.photos/200/200" />
      <h2>Access From Any Device</h2>
      <p>foo bar</p>
    </div>
  </div>
  <div class="feature-blocks">
    <div class="block bottom">
      <img src="https://picsum.photos/200/200" />
      <h2>Unlimited Access</h2>
      <p>foo bar</p>
    </div>
  </div>
  <div class="feature-blocks">
    <div class="block right">
      <img src="https://picsum.photos/200/200" />
      <h2>Commercial Use</h2>
      <p>foo bar</p>
    </div>
  </div>
</div>

这里的关键变化是您需要用“功能块”包装每个块。这正在运行，并且可以在 URL 中看到它：https://jsfiddle.net/dboua6j8/31/。