[英]How to return the div that is currently in the viewport?
I'm writing a infinity scroll function for my app that will preload pages once the user scrolls up or down. 我正在为我的应用程序编写一个无限滚动功能,该功能将在用户向上或向下滚动时预加载页面。 The (Cordova/Phonegap) app will display pages that are dynamically created like this:
(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>
I want to know which of these page_blabla id's is currently in the viewport so I can determine the next and previous pages to preload. 我想知道这些page_blabla id中的哪个当前在视口中,因此我可以确定要预加载的下一页和上一页。 How would one achieve this?
一个人将如何实现这一目标? The result needs to be a function that returns the id of the page currently in the viewport.
结果必须是一个返回当前视口中页面ID的函数。
I've seen several examples where people determine if a specific element is in the viewport, but that's not what I need. 我已经看到了几个示例 ,人们可以确定某个特定元素是否在视口中,但这不是我所需要的。 I want to return the id of the page(div) that is currently in the viewport.
我想返回当前在视口中的page(div)的ID。
Thx in advance! 提前谢谢!
JQUERY SOLUTION: JQUERY解决方案:
After you need just call function isOnScreen for a detection. 在您只需要调用函数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));
};
Based on this DEMO: 基于此演示:
http://jsfiddle.net/moagrius/wN7ah/ http://jsfiddle.net/moagrius/wN7ah/
Original is edited from this article: 原文是根据本文编辑的:
http://upshots.org/javascript/jquery-test-if-element-is-in-viewport-visible-on-screen http://upshots.org/javascript/jquery-test-if-element-is-in-viewport-visible-on-screen
And maybe this can help :) as well 也许这可以帮助:)
http://www.teamdf.com/web/jquery-element-onscreen-visibility/194/ http://www.teamdf.com/web/jquery-element-onscreen-visibility/194/
It's just a small leap from the examples you linked to, let's assume you have isElementInViewport
from your example link , test each page's <div>
for being in the viewport until you get a match, then return that Node's id . 距您链接到的示例
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');
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.