javascript - 检查元素是否在视口(viewport)中无法正常工作

Question

我有三个元素 - 每个元素从一开始就是隐藏的。如果用户滚动到它们，它们就会出现。我编写了一个函数来检查名为 bubbles 的元素是否在视口(viewport)内。如果是，那么函数应该显示其余元素。

但事实并非如此。元素 boxes 比元素 bubbles 更高，并且它还触发一个函数。但不应该。我不知道问题出在哪里。

document.addEventListener("scroll", checkViewport);

function checkViewport() {

  var bubbles = document.getElementsByClassName("bubble-chat");
  var boxes = document.getElementsByClassName("boxes");
  var avatar = document.getElementsByClassName("msg-avatar");

  for (let i = 0; i < avatar.length; i++) {
    var bounding = bubbles[i].getBoundingClientRect();

    if (
      bounding.top >= 0 &&
      bounding.left >= 0 &&
      bounding.right <= (window.innerWidth || document.documentElement.clientWidth) &&
      bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight)
    ) {
      avatar[i].style.opacity = "1";
      bubbles[i].style.opacity = "1";
      (function(i) {
        setTimeout(function() {
          bubbles[i].style.display = "none";
          boxes[i].style.opacity = "1";
        }, 3000);
      })(i);
    }
  }
}

Answer 1

您还应该考虑滚动定位，因为边界框是相对于滚动定位的。固定代码:

  bounding.top >= document.documentElement.scrollTop &&
  bounding.left >= 0 &&
  bounding.right <= (window.innerWidth || document.documentElement.clientWidth) &&
  bounding.bottom <= document.documentElement.scrollTop + (window.innerHeight || document.documentElement.clientHeight)