溫馨提示：本文目前僅適用於在 Chrome 51 及以上中瀏覽。 2016.11.1 追加，Firefox 52 也已經實現。 2016.11.29 追加，Firefox 的人擔心目前規范不夠穩定，未來很難保證向后兼容，所以禁用了這個 API，需要手動打開 ...

背景 在網頁開發的過程中，我們常常需要判斷某個元素是否進入了"視口"（viewport），即用戶能不能看到它。 一般采用這樣的方法實現，兼容scroll事件，然后調用方法獲取目標元素的坐標，判斷是否在視口之內。代碼不僅繁瑣，而且由於scroll事件密集發生，計算量很大一不小心沒有函數去抖就又 ...

無限滾動 很多人以為無限滾動，就是只是觸底加載，但是加載到一定長度，頁面會爆炸！！ 真正的無限加載是真正的無限！ 頁面僅渲染可見的元素，對不可見的不占用頁面節點，才可實現真正的無限滾動。 ...

IntersectionObserver callback callback 一般會觸發兩次,一次是目標進入視口(可見),另一次是完全離開(不可見) 每一個屬性的含義 time：可見性發生變化的時間，是一個高精度時間戳，單位為毫秒 target：被觀察的目標 ...

1，boundingClientRect：目標邊界。這個目標，就是我們的觀察對象，可以看到剛開始相交的時候，它的位置情況。這個位置是相對於整個頁面的 ...

使用IntersectionObserver就行了，使用起來簡單方便，而且性能上也比監聽滾動事件要好很多 ...

基於 IntersectionObserver 異步監聽方法，實現無線信息流下拉加載， https://developer.mozilla.org/zh-CN/docs/Web/API/IntersectionObserver ...

網頁開發時，常常需要了解某個元素是否進入了"視口"（viewport），即用戶能不能看到它。 上圖的綠色方塊不斷滾動，頂部會提示它的可見性。 傳統的實現方法是，監聽到scroll事件后，調用目 ...