javascript - JS检测div在屏幕下方的高度

Question

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

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

当用户向下滚动 div 时，如果可见屏幕下方的 div 左侧有 100px，我想触发一个操作(例如，警报)。

由于屏幕尺寸各不相同，我需要一种简单地检测屏幕下方剩余多少 div 的方法。

问题是，我不想不断测量高度变化，因为这对用户端来说可能很“困难”。

一个想法是，也许我会在这个主 div 的末尾有一个“隐藏”div，当它在 View 中时，我会触发一个 Action 。

如您所见，我不确定实现此目的的最佳方法是什么。

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

谢谢!

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 是视口(viewport)的高度，
• div.offsetTop 是 div 距顶部的位置，
• div.scrollHeight 是 div 的高度。

整个if代表滚动超出div底部的像素数。超出底部的 -100 表示距离底部还有 100px。