Javascript,检查元素是否已离开屏幕

时间:2013-12-17 12:48:54

标签: javascript jquery

我正在尝试测试<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的底部是否超过了窗口的顶部。

4 个答案:

答案 0 :(得分:4)

divBottomundefined。您可以使用元素的top偏移量,然后通过将其高度添加到顶部来计算它的最低值,就像在此fiddle中一样。

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

    console.log(divBottom, windowTop);

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

答案 1 :(得分:4)

这里有一个非常有用的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
}

希望这有帮助!

答案 2 :(得分:0)

试试这个。

var myTop        = $('#home').offset().top;  // the top y location of your element
var windowTop    = $(window).scrollTop();           // the top of the window
var windowBottom = windowTop + $(window).height();  // the bottom of the window

然后

if (myTop > windowTop && myTop < windowBottom) {

答案 3 :(得分:0)

尝试:

$(window).scroll(function(){ 
//your code 
});