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的高度，使上述表达整个表示滚动超出的div的底部像素数。超出底部意味着剩下100px。