Question

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

但事实并非如此。元素 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)

Answer 2

嗯，我觉得很愚蠢。该代码一直都可以。我只是评论了一个 msg-text divs，结果证明这是代码破裂的原因。

检查元素是否在视口中无法正常工作

2 个答案: