Javascript 如何返回当前在视口中的div？

我正在为我的应用程序编写一个无限滚动功能，一旦用户向上或向下滚动，该功能将预加载页面。（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>

我想知道这些页面的哪个id当前在视口中，以便确定要预加载的下一个和上一个页面。如何做到这一点？结果需要是一个函数，该函数返回当前在视口中的页面的id

我见过一些人确定某个特定元素是否在视口中的情况，但这不是我需要的。我想返回当前在视口中的页面（div）的id

---

提前谢谢

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));

};

$.fn.isOnScreen=函数（）{
var win=$（窗口）；
变量视口={
top:win.scrollTop（），
左：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（）；
返回（！（viewport.rightbounds.right | | viewport.bottombounds.bottom））；
};

基于此演示：

原文编辑自本文：

也许这也能有所帮助：）以及

---

与链接到的示例相比，这只是一个小小的飞跃，假设您有

IsElementViewPort

，测试每个页面的

是否在视口中，直到获得匹配，然后返回该节点的id

var pages=document.getElementsByClassName（'pagina'）；
函数getCurrentPageId（）{
var i；
对于（i=0；i

工作正常！太多了，保罗！

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');
}