[javascript] 偵測目標物是否有在瀏覽器畫面內- getBoundingClientRect()

用 getBoundingClientRect() 效能會比較好，直接參考 code：

狀況一：只要有一部超出畫面就偵測已在畫面外

var myElement = document.getElementById('my-element');
var bounding = myElement.getBoundingClientRect();

if (bounding.top >= 0 && bounding.left >= 0 && bounding.right <= window.innerWidth && bounding.bottom <= window.innerHeight) {

    console.log('Element is in the viewport!');
} else {

    console.log('Element is NOT in the viewport!');
}

狀況二：全部都在外面才判斷在畫面外

var myElement = document.getElementById('my-element');
var bounding = myElement.getBoundingClientRect();
var myElementHeight = myElement.offsetHeight;
var myElementWidth = myElement.offsetWidth;

function elementInViewport() {

    var bounding = myElement.getBoundingClientRect();

    if (bounding.top >= -myElementHeight 
        && bounding.left >= -myElementWidth
        && bounding.right <= (window.innerWidth || document.documentElement.clientWidth) + myElementWidth
        && bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight) + myElementHeight) {

        console.log('Element is in the viewport!');
    } else {

        console.log('Element is NOT in the viewport!');
    }
}

原始文章：
Check If Element Is Inside Of The Viewport With JavaScript