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

Question

我正在為我的應用程序編寫一個無限滾動功能，該功能將在用戶向上或向下滾動時預加載頁面。 （Cordova / 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的函數。

我已經看到了幾個示例 ，人們可以確定某個特定元素是否在視口中，但這不是我所需要的。 我想返回當前在視口中的page（div）的ID。

提前謝謝！

Answer 1

JQUERY解決方案：

在您只需要調用函數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));

};

基於此演示：
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/

Answer 2

距您鏈接到的示例isElementInViewport ，假設您的示例鏈接中有isElementInViewport ，測試每個頁面的<div>是否在視口中，直到獲得匹配項，然后返回Node的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');
}