如何返回當前在視口中的div？

Question

我正在爲我的應用程序編寫一個無限滾動功能，該功能會在用戶向上或向下滾動時預加載頁面。在（科爾多瓦/ PhoneGap的）應用程序會顯示動態像這樣創建的頁面：

<!-- Contents --> 
<div id="page-container"> 
<div id="scroller"> 
    <div id="page_1" class="pagina"></div> 
    <div id="page_2" class="pagina"></div> 
    <div id="page_3" class="pagina"></div> 
    <div id="page_4" class="pagina"></div> 
    <div id="page_5" class="pagina"></div> 
    <div id="page_6" class="pagina"></div> 
</div> 

我想知道這些page_blabla的id是目前在視口，以便我能確定下一個和上頁面預加載。如何實現這一目標？結果必須是返回當前在視口中的頁面的ID的函數。

我見過幾個examples人們確定某個特定元素是否在視口中，但這不是我所需要的。我想返回當前在視口中的頁面（div）的ID。

Thx提前！

Answer 1

這是從你鏈接的例子中跳出一小步，讓我們成爲sume從example link開始isElementInViewport，測試每個頁面的<div>在視口中，直到獲得匹配，然後返回節點的ID。

var pages = document.getElementsByClassName('pagina'); 
function getCurrentPageId() { 
    var i; 
    for (i = 0; i < pages.length; ++i) 
     if (isElementInViewport(pages[i])) 
      return pages[i].getAttribute('id'); 
} 

Answer 2

JQUERY SOLUTION：

你的檢測只需要調用函數isOnScreen後。

$.fn.isOnScreen = function(){ 

    var win = $(window); 

    var viewport = { 
     top : win.scrollTop(), 
     left : win.scrollLeft() 
    }; 
    viewport.right = viewport.left + win.width(); 
    viewport.bottom = viewport.top + win.height(); 

    var bounds = this.offset(); 
    bounds.right = bounds.left + this.outerWidth(); 
    bounds.bottom = bounds.top + this.outerHeight(); 

    return (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom)); 

}; 

基於此DEMO：
http://jsfiddle.net/moagrius/wN7ah/

原稿從本文編輯：
http://upshots.org/javascript/jquery-test-if-element-is-in-viewport-visible-on-screen

也許這可以幫助:)以及
http://www.teamdf.com/web/jquery-element-onscreen-visibility/194/