檢查element是否出現在畫面之中
Nov 5 · 3 min read
在許多情況下,我們必須知道當user在捲動畫面時,某個element是不是出現在畫面之中,程式才能決定要執行那些功能,典型的例子像是: 圖片的lazy load、無限scroll(infinite scrolling)…等。

使用距離判斷:
透過新增event listener 像是scroll和resize ,來判斷目標element是否出現在user的畫面之中,這邊需要知道幾樣東西:
window.innerHeight 、HTMLElement.offsetTop 和window.pageYOffset
window.innerHeight 指的就是瀏覽器的可視高度,也就是瀏覽器顯示畫面的高度。

