JS檢測DIV高度屏幕左側

Question

下方所以，我有一個HTML標記如下：

還有就是幾乎涵蓋了首頁的整個高度一個div。 但是高度是動態生成的。

當用戶滾動DIV下來，如果有100像素左右可視屏幕下方的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的底部的像素數。超出底部意味着剩下100px。