javascript - js测量可见高度与div总高度的差值

Question

js中如何测量div的总高度和屏幕可见高度？

例如，如果div的总高度为1000px，当前只有450px在屏幕上可见。

因为只有 450px 是可见的，还有 650px 可以滚动(剩余 px)，所以我试图在剩余 px 小于 100px 时触发警报。

换句话说，在 1000px 之外，如果用户向下滚动并且剩余的 px 小于 100px，我想触发警报。

我看到我可以使用类似“.offset().top”的东西，但我不太确定如何使用。

Answer 1

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

window.addEventListener("scroll", function() {
  if (window.pageYOffset - div.offsetTop > 900) {
    alert('Less than 100px of div visible');
  }
});

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

<div></div>

• window.pageYOffset 是从顶部开始的当前滚动位置，
• div.offsetTop 是div从顶部开始的位置

两者之间的区别在于滚动到 div 顶部之外的像素数。超过 1000 像素高的元素顶部超过 900 像素意味着剩下不到 100 像素。

---

您还可以将 if 更改为

if (window.pageYOffset - (div.offsetTop + div.scrollHeight) > -100) {

div.scrollHeight 是 div 的高度，所以上面的整个表达式代表滚动到 bottom 之外的像素数>分区。 -100 超出底部意味着还剩 100px。