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。