檢查元素在屏幕上

Question

Possible Duplicate:
jQuery - Check if element is visible after scroling

可見我試圖確定元素是否顯示在屏幕上。爲了達到這個目的，我試圖使用offsetTop來查找元素的垂直位置，但返回的值不正確。在這種情況下，除非向下滾動，否則該元素不可見。但是，儘管如此，當我的屏幕高度爲703時，offsetTop返回值爲618，因此根據offsetTop元素應該是可見的。

的代碼我使用看起來像這樣：

function posY(obj) 
{ 
    var curtop = 0; 

    if(obj.offsetParent) 
    { 
    while(1) 
    { 
     curtop += obj.offsetTop; 

     if(!obj.offsetParent) 
     { 
     break; 
     } 

     obj = obj.offsetParent; 
    } 
    } else if(obj.y) 
    { 
    curtop += obj.y; 
    } 

    return curtop; 
} 

預先感謝您！

Answer 1

然後，您想使用scrollTop將元素頂部位置與頁面進行比較。

Answer 2

你可以使用jQuery，因爲它是跨瀏覽器兼容的嗎？

if(isOnScreen($('#myDivId'))) { /* Code here... */ }; 

Answer 3

好BenM說，你需要檢測視+滾動位置的高度，用你最poisiton匹配：

function isOnScreen(element) 
{ 
    var curPos = element.offset(); 
    var curTop = curPos.top; 
    var screenHeight = $(window).height(); 
    return (curTop > screenHeight) ? false : true; 
} 

，然後使用類似調用該函數。你使用的功能是好的，做這項工作，儘管它需要更復雜的運動。

如果你不使用jQuery那麼腳本會是這樣的：

function posY(elm) { 
    var test = elm, top = 0; 

    while(!!test && test.tagName.toLowerCase() !== "body") { 
     top += test.offsetTop; 
     test = test.offsetParent; 
    } 

    return top; 
} 

function viewPortHeight() { 
    var de = document.documentElement; 

    if(!!window.innerWidth) 
    { return window.innerHeight; } 
    else if(de && !isNaN(de.clientHeight)) 
    { return de.clientHeight; } 

    return 0; 
} 

function scrollY() { 
    if(window.pageYOffset) { return window.pageYOffset; } 
    return Math.max(document.documentElement.scrollTop, document.body.scrollTop); 
} 

function checkvisible(elm) { 
    var vpH = viewPortHeight(), // Viewport Height 
     st = scrollY(), // Scroll Top 
     y = posY(elm); 

    return (y > (vpH + st)); 
} 

使用jQuery是一個容易得多：

function checkVisible(elm, evalType) { 
    evalType = evalType || "visible"; 

    var vpH = $(window).height(), // Viewport Height 
     st = $(window).scrollTop(), // Scroll Top 
     y = $(elm).offset().top, 
     elementHeight = $(elm).height(); 

    if (evalType === "visible") return ((y < (vpH + st)) && (y > (st - elementHeight))); 
    if (evalType === "above") return ((y < (vpH + st))); 
} 

這甚至提供了第二個參數。使用「可見」（或沒有第二個參數），它會嚴格檢查屏幕上是否有元素。如果它設置爲「高於」，則當有問題的元素位於或高於屏幕時，它將返回true。

見行動：http://jsfiddle.net/RJX5N/2/

我希望這回答了你的問題。

- 改進VERSION--

這是短了很多，應該做得一樣好：用小提琴

function checkVisible(elm) { 
    var rect = elm.getBoundingClientRect(); 
    var viewHeight = Math.max(document.documentElement.clientHeight, window.innerHeight); 
    return !(rect.bottom < 0 || rect.top - viewHeight >= 0); 
} 

來證明這一點：http://jsfiddle.net/t2L274ty/1/

和版本包括threshold和mode：

function checkVisible(elm, threshold, mode) { 
    threshold = threshold || 0; 
    mode = mode || 'visible'; 

    var rect = elm.getBoundingClientRect(); 
    var viewHeight = Math.max(document.documentElement.clientHeight, window.innerHeight); 
    var above = rect.bottom - threshold < 0; 
    var below = rect.top - viewHeight + threshold >= 0; 

    return mode === 'above' ? above : (mode === 'below' ? below : !above && !below); 
} 

並用小提琴來證明它：http://jsfiddle.net/t2L274ty/2/