如何在jQuery中获取屏幕上的可见元素对象？ [英] How to get on-screen visible element objects in jQuery?

问题描述

我有一个在DOM中的对象列表，它比屏幕高度区域长。

我需要检测屏幕上的可见对象，只能制作时间轴树视图。 （类似于下面的图片）：

我的DOM看起来像这样：

 <！ - 要检测到的屏幕上的元素可见性 - > 
< 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> 
 
 
<！ - 屏幕上的元素可见性要AFFECTED  - > 
< ul id =timeline> 
< li view-id =elem-1> Elem-1< / li> 
< li view-id =elem-2> Elem-2< / li> 
< li view-id =elem-3class =active> Elem-3< / li> 
< li view-id =elem-4class =active> Elem-4< / li> 
< li view-id =elem-5class =active> Elem-5< / li> 
< li view-id =elem-6class =active> Elem-6< / li> 
< li view-id =elem-7> Elem-7< / li> 
< li view-id =elem-8> Elem-8< / li> 
< / ul> 
  

我的目标是从＃检测屏幕上可见元素的ID'元素容器，并将活动类分配给 #timeline 容器中的相应元素。

我需要在 Scroll 事件中执行此过程。

任何想法如何实现？

解决方案

首先屏幕可见区域被称为 Viewport 。

取自OP。在 Photoshop中清除和编辑）

---

所以所有你需要的是检测你的视口中的所有元素。

这可以使用jQuery的许多插件来实现，但是我将在一个例子中解释一下，这个例子称为 jQuery inviewport

链接到源代码和文档： [withInViewport - Github]

---

步骤1：

下载插件，并在脚本中包含 jQuery 框架和 inviewport 插件：

 < script src =http://code.jquery.com/jquery-1.7.min.js> < /脚本> 
< script src =inViewport.js>< / script> 
< script src =jquery.withinviewport.js>< / script> 
  

。

步骤2： h1>

滚动的初始化功能事件：

  $（window）.bind（scroll，function（）{
 //你的代码占位符
}）; 
  

。

步骤3： h1>

使用 inviewport selector来获取您的所有元素Viewport和每个元素将类添加到相应的列表项中， code> #timeline container：

  $（＃elements> div） .withinviewport（）。each（function（）{
 $（'＃timeline> li [view-id ='+ $（this）[0] .id +']'）addClass '）; 
}）; 
  

步骤4：

：

  $（window）.bind（scroll，function（）{
 
 //清除所有活动的类
 $（'＃timeline> li'）。removeClass（'active'）; 
 
 //添加活动类到时间线
 $（＃元素> div）。withinviewport（）。each（function（）{
 $（'＃timeline> li [view-id ='+ $（this）[0] .id +']' .addClass（'active'）; 
}）; 
}）; 
  

。

---

。

此外，此插件可让您设置视图端口的顶部，底部，左右偏移量。

请参阅演示这里： http：// patik .com / code / in-viewport /

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屋！