如何在 jQuery 中获取屏幕上可见的元素对象？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19498068/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get on-screen visible element objects in jQuery?
提问by
I have a list of objects in DOM, which is longer than screen height area.
我在 DOM 中有一个对象列表，它比屏幕高度区域长。
I need to detect on-screen visible objects only to make something like timeline tree-view. (something like on the picture below):
我只需要检测屏幕上的可见对象才能制作时间轴树视图之类的东西。（类似于下图）：
My DOM looks like this:
我的 DOM 看起来像这样：
<!-- elements visibility on screen to be DETECTED -->
<div id="elements">
<div id="elem-1">Lorem ipsum</div>
<div id="elem-2">Lorem ipsum</div>
<div id="elem-3">Lorem ipsum</div>
<div id="elem-4">Lorem ipsum</div>
<div id="elem-5">Lorem ipsum</div>
<div id="elem-6">Lorem ipsum</div>
<div id="elem-7">Lorem ipsum</div>
<div id="elem-8">Lorem ipsum</div>
</div>
<!--elements visibility on screen to be AFFECTED -->
<ul id="timeline">
<li view-id="elem-1">Elem-1</li>
<li view-id="elem-2">Elem-2</li>
<li view-id="elem-3" class="active">Elem-3</li>
<li view-id="elem-4" class="active">Elem-4</li>
<li view-id="elem-5" class="active">Elem-5</li>
<li view-id="elem-6" class="active">Elem-6</li>
<li view-id="elem-7">Elem-7</li>
<li view-id="elem-8">Elem-8</li>
</ul>
My goal is to detect IDs' of on-screen visible elements from #elementscontainer and assign activeclass to corresponding elements in #timelinecontainer.
我的目标是从#elements容器中检测屏幕上可见元素的 ID，并将active类分配给容器中的相应元素#timeline。
I need to do this process on Scrollevent.
我需要在Scroll事件上做这个过程。
Any ideas how to achieve this?
任何想法如何实现这一目标？
采纳答案by zur4ik
First of all on-screen visible areais known as Viewport.
首先on-screen visible area被称为Viewport。
(image is taken from OP. Cleared and edited in Photoshop)
（图片来自OP。在Photoshop中清除和编辑）
So all you need is to detect all elements in your Viewport.
所以你需要做的就是检测你的Viewport.
This can be achieved using many plugins for jQuery, but I'll explain you on one example, which is called as jQuery withinviewport
这可以通过使用 jQuery 的许多插件来实现，但我将用一个例子来解释你，它被称为 jQuery withinviewport
Link to source and documentation on: [ withInViewport - Github ]
链接到源代码和文档：[ withInViewport - Github ]
Step 1:
第1步：
Download plugins and include jQueryframework and withinviewportplugin in your script:
下载插件并在脚本中包含jQuery框架和withinviewport插件：
<script src="http://code.jquery.com/jquery-1.7.min.js"></script>
<script src="withinViewport.js"></script>
<script src="jquery.withinviewport.js"></script>
.
.
Step 2:
第2步：
Initialise function on scrollevent:
scroll事件初始化函数：
$(window).bind("scroll", function() {
//your code placeholder
});
.
.
Step 3:
第 3 步：
Use withinviewportselector to get all elements in you Viewport and by each element add class to corresponding list-item in your #timelinecontainer:
使用withinviewport选择器获取 Viewport 中的所有元素，并通过每个元素将类添加到#timeline容器中的相应列表项：
$("#elements > div").withinviewport().each(function() {
$('#timeline > li[view-id="'+$(this)[0].id+'"]').addClass('active');
});
Step 4:
第四步：
Put all together:
放在一起：
$(window).bind("scroll", function() {
//clear all active class
$('#timeline > li').removeClass('active');
//add active class to timeline
$("#elements > div").withinviewport().each(function() {
$('#timeline > li[view-id="'+$(this)[0].id+'"]').addClass('active');
});
});
.
.
.
.
Also this plugin gives you opportunity to set top, bottom, left and right offset for view-port.
此插件还让您有机会为视口设置顶部、底部、左侧和右侧的偏移量。
See demo here: http://patik.com/code/within-viewport/
在此处查看演示：http: //patik.com/code/within-viewport/
