如何在 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屋！