2013-12-17 107 views
0

我試圖測試一個<div>是否已滾動出視圖。Javascript,檢查元素是否已經離開屏幕

這是我到目前爲止,

$(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已經超過窗口的頂部。

+1

這可以幫助你http://stackoverflow.com/questions/487073/check-if-element-is-visible-after-scrolling – MaVRoSCy

回答

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

+1說*完全是我要說的,但3分鐘更快;) – Moob

+2

'$(「#home」)。offset()。 + $(「#home」)。height()'違反DRY。首選'var $ home = $(「#home」),divBottom = $ home.offset()。top + $ home.height();'代替。 –

+0

很多謝謝你的答案!我只是抓住3個控制檯登錄,看看我的var底部是「未定義」,並做偏移頂部+高度是我看過的明顯答案!再次感謝你們 – user2979139

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) { 
+0

這發生在div完全在屏幕上,我試圖得到它在div剛剛離開屏幕時觸發,'divBottom>屏幕頂部' – user2979139

0

嘗試:

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

我認爲scroll在這裏不是問題,因爲它總是給出「no」。這裏的div位置計算不正確。 –

+0

我看過:「不管我在哪裏滾動,什麼都沒有記錄。」 – jvv

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 
} 

希望這會有所幫助!