Question

我需要知道div元素的结尾当前是否在用户浏览器中可见。

我尝试了一些在网络上看到的东西，但是scrollTop（）在浏览器中总是给我零。我在Chrome浏览器中读到有关某个问题的内容，但我不太了解。

jQuery(
  function($) {
    $('#flux').bind('scroll', function() {
      if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
        alert('end reached');
      }
    })
  }
);

我的想法如下：

1-用户加载页面并看到带有一些信息的条形图（底部可见页面上的粘性div）。 2-滚动一点并到达div元素的末尾后，此栏将定位在div之后。这是酒吧的原始位置

我真的不知道何时到达div元素的末尾。最终我找到了以下代码：

if ($(window).scrollTop() >= $('#block-homepagegrid').offset().top + $('#block-homepagegrid').outerHeight() - window.innerHeight) {
  $('.hero-special-message').removeClass('hero-special-messege-scrolling');
} else {
  $('.hero-special-message').addClass('hero-special-messege-scrolling');
}
});

我看到它正在工作，但是在理解它的功能时遇到了一些麻烦。

我知道以下内容：

1。 $（window）.scrollTop（）;

这给了我用户滚动的像素数量，很容易解释。

2。 $（'＃block-homepagegrid'）。offset（）。top;

我认为这是页面起点与div起点之间的距离。我知道这是当前坐标，但是这里最顶层是什么？

3。 $（'＃block-homepagegrid'）。outerHeight（）;

this gives the height of the element, I know there are 3, like
height(), innerHeight() and outerHeight(), if you want to take into
account border, margin, padding, which is the better to use?

4。 window.innerHeight;

我理解这是用户看到的内容，但是我很难理解为什么这对我的情况很重要。

谢谢！

Answer 1

您可能对本机JavaScript IntersectionObserver API感兴趣。它会自动找出给定元素在窗口中可见的百分比，并根据该百分比触发回调。因此，您可以执行以下操作：

function visibleHandler(entries) {
  if (entries[0].intersectionRatio >= 1.0) {
    // The whole element is visible!
  } else {
    // Part of it is scrolled offscreen!
  }
}
const observer = new IntersectionObserver(visibleHandler, {threshold: 1.0});
observer.observe(document.getElementById('flux'));

现在，每当ID为flux的元素在视图中为100％时，它将触发visibleHandler。如果滚动回视线之外，它也会再次触发；这就是为什么该功能检查可见性的比率，以查看它是刚达到100％还是刚从100％降低。您可能会更加幻想，可以使用观察者条目的insersectionRect，它为您提供包含元素可见部分的矩形，并使用该矩形确定顶部/底部的可见性。

检测何时可以看到div的结尾

1 个答案: