如何在 jQuery 中获取屏幕上可见的元素对象? [英] How to get on-screen visible element objects in jQuery?
问题描述
我在 DOM 中有一个对象列表,它比屏幕高度区域长.
我只需要检测屏幕上的可见对象来制作时间轴树视图之类的东西.(类似于下图):
我的 DOM 如下所示:
<!-- 要检测的屏幕元素可见性--><div id="元素"><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>
<!--元素在屏幕上的可见性将受到影响--><ul id="时间线"><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>
我的目标是从 #elements
容器中检测屏幕上可见元素的 ID,并将 active
类分配给 #timeline
容器.
我需要在 Scroll
事件上做这个过程.
任何想法如何实现这一目标?
首先屏幕可见区域
被称为Viewport
.
(图片取自 OP.在 Photoshop 中清除和编辑)
<小时>
所以你需要的只是检测Viewport
中的所有元素.
这可以使用许多 jQuery 插件来实现,但我将用一个例子来解释你,它被称为 jQuery insideviewport
源代码和文档链接:[ withInViewport - Github ]
<小时>第 1 步:
下载插件并在脚本中包含 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>
.
第 2 步:
scroll
事件的初始化函数:
$(window).bind("scroll", function() {//你的代码占位符});
.
第 3 步:
使用 withinviewport
选择器获取 Viewport 中的所有元素,并通过每个元素将类添加到 #timeline
容器中的相应列表项:
$("#elements > div").withinviewport().each(function() {$('#timeline > li[view-id="'+$(this)[0].id+'"]').addClass('active');});
第 4 步:
放在一起:
$(window).bind("scroll", function() {//清除所有活动类$('#timeline > li').removeClass('active');//将活动类添加到时间线$("#elements > div").withinviewport().each(function() {$('#timeline > li[view-id="'+$(this)[0].id+'"]').addClass('active');});});
.
<小时>.
此外,此插件还让您有机会设置视口的顶部、底部、左侧和右侧偏移.
在此处查看演示:http://patik.com/code/视口内/
I have a list of objects in DOM, which is longer than screen height area.
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:
<!-- 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 #elements
container and assign active
class to corresponding elements in #timeline
container.
I need to do this process on Scroll
event.
Any ideas how to achieve this?
First of all on-screen visible area
is known as Viewport
.
(image is taken from OP. Cleared and edited in Photoshop)
So all you need is to detect all elements in your Viewport
.
This can be achieved using many plugins for jQuery, but I'll explain you on one example, which is called as jQuery withinviewport
Link to source and documentation on: [ withInViewport - Github ]
Step 1:
Download plugins and include jQuery
framework and withinviewport
plugin in your script:
<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:
Initialise function on scroll
event:
$(window).bind("scroll", function() {
//your code placeholder
});
.
Step 3:
Use withinviewport
selector to get all elements in you Viewport and by each element add class to corresponding list-item in your #timeline
container:
$("#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/
这篇关于如何在 jQuery 中获取屏幕上可见的元素对象?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!