JS检测屏幕下方的div高度

Question

所以，我有一个html标记如下：

有一个div几乎涵盖了整个页面的高度。 然而，高度是动态生成的。

当用户向下滚动div时，如果在可视屏幕下方div的左侧有100px，我想触发一个动作（例如，警告）。

由于屏幕尺寸不同，我需要一种简单的方法来检测屏幕下方有多少div。

问题是，我不想经常测量高度变化，因为在用户端可能会“很难”。

一个想法是，也许我会在这个主div的末尾有一个“隐藏”div，当它处于视点时，我会触发一个动作。

正如您所看到的，我不确定为此目的最好的方法是什么。

如果您需要澄清，请告诉我。

谢谢！

Answer 1

var div = document.getElementsByTagName('div')[0];

window.addEventListener("scroll", function() {
  if (window.pageYOffset + window.innerHeight - (div.offsetTop + div.scrollHeight) > -100) {
    alert('Less than 100px of div remains below viewport');
  }
});

body {
  height: 2000px;
}
div {
  background-color: lightblue;
  height: 1000px;
}

<div></div>

• window.pageYOffset是从顶部开始的当前滚动位置
• window.innerHeight是视口的高度，
• div.offsetTop是div从顶部开始的位置，
• div.scrollHeight是div。
的高度

整个if代表滚动超出div底部的像素数。而-100超出底部意味着100px留给它。