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 的函数。

我见过几个人examples，人们在哪里确定特定元素是否在视口中，但这不是我需要的。我想返回当前在视口中的页面（div）的id。

提前谢谢！

Answer 1

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/

Answer 2

与您链接的示例相比，这只是一个小小的飞跃，让我们假设您example link中有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');
}

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

2 个答案: