js 判斷進入可視區域

CreateTime--2018年4月14日08:17:41

Author:Marydon

1.使用場景

　　圖片懶加載時候需要用到，其他情況暫時沒有遇到，歡迎留言補充！

2.代碼實現

/**
 * 監聽網頁滾動事件
 */
$(window).scroll(function() {
    // 獲取的是瀏覽器可見區域高度（網頁的可視區域的高度）（不滾動的情況下）
    var documentClientHeight = document.documentElement.clientHeight || window.innerHeight
    // 元素頂端到可見區域（網頁）頂端的距離
    var htmlElementClientTop = document.getElementById('#id').getBoundingClientRect().top;
    // 網頁指定元素進入可視區域
    if (documentClientHeight >= htmlElementClientTop) {
        // TODO 執行你要做的操作
    }
    
});

拓展：

// 獲取指定元素距離網頁左上角(0,0)的縱向偏移距離
// 該值會隨着滾動條的變化而變化：scrollTop變大，該值變小；scrollTop變小，該值變大
document.getElementById('#id').getBoundingClientRect().top;

value = 網頁可視區域高度 - 元素距離網頁頂部
1.當網頁可視區域高度>=元素距離網頁頂部時，說明該元素進入可視區域
2.計算可視距離：當value<0時，表示的是該元素差多少像素可以被看到（可視距離 = -value）
3.計算可視高度：當value>0時，表示的是該元素的可視高度（該元素可以被看到的高度）（可視距離 = value）

 相關推薦：

　　 js 圖片懶加載