Javascript，检查元素是否离开屏幕

Question

我正在尝试测试 a 是否<div>已滚动到视图之外。

这就是我到目前为止所拥有的

$(window).on('scroll',function(){
    var divBottom    = $('#home').offset().bottom; 
    var windowTop    = $(window).scrollTop();           
    var windowBottom = windowTop + $(window).height();  

    if (divBottom >= windowTop) {
        console.log("yes");
    } else {
        console.log("no");
    }
});

无论我滚动到哪里，都不会记录任何内容。

我试图测试的是 div 的底部是否超过了窗口的顶部。

Answer 1

有一个非常有用的Vanilla JS函数可以在这里提供帮助。

var divposition = document.getElementById('home').getBoundingClientRect();
if( divposition.left+divposition.width < 0) {
    // element is off to the left of the view
}
if( divposition.top+divposition.height < 0) {
    // element is off the top of the view
}
if( divposition.top > window.innerHeight) {
    // element is off the bottom of the view
}
if( divposition.left > window.innerWidth) {
    // element is off to the right of the view
}

希望这可以帮助！