如何在 jQuery 中获取屏幕上可见的元素对象？ [复制]

Posted 2023-02-21

【中文标题】如何在 jQuery 中获取屏幕上可见的元素对象？ [复制]

【英文标题】：How to get on-screen visible element objects in jQuery? [duplicate]

【发布时间】：2013-10-30 03:42:35

【问题描述】：

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

我只需要检测屏幕上的可见对象来制作时间轴树视图之类的东西。 （如下图所示）：

我的 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>

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

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

任何想法如何实现这一目标？

【问题讨论】：

您需要遍历每个元素并将其top 与文档的scrollTop 进行比较，并将bottom 与文档的scrollTop + height 进行比较。

你可以使用benpickles.github.io/onScreen

这个问题不重复，其他链接的问题想知道一个元素是否在视口中，这个想知道多个元素中的哪一个是视口中的第一个可见元素跨度>

【参考方案1】：

首先on-screen visible area被称为Viewport。

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

---

因此，您只需检测Viewport 中的所有元素。

这可以使用许多 jQuery 插件来实现，但我将通过一个示例向您解释，称为 jQuery withinviewport

来源和文档链接：[ 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() 
    //your code placeholder
);

.

第 3 步：

使用withinviewport 选择器获取视口中的所有元素，并通过每个元素将类添加到#timeline 容器中的相应列表项：

$("#elements > div").withinviewport().each(function() 
   $('#timeline > li[view-id="'+$(this)[0].id+'"]').addClass('active');
);

第四步：

放在一起：

$(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');
    );
);

.

---

.

此插件还让您有机会为视口设置顶部、底部、左侧和右侧的偏移量。

在此处查看演示：http://patik.com/code/within-viewport/

【讨论】：

请解释一下“做”和使用插件的区别？我很想知道。另外请告诉我 OP 说我不想使用插件的地方

@musefan 我在不同的论坛上有相同的答案，只是复制了大部分。只有我拍了Punto的照片并在photoshop中快速清理。

@zur4ik，非常清楚：到目前为止，Punto 只问了两个问题，你回答了两个问题（并且你的答案被接受了）。他提供的唯一答案是你的一个问题，你接受了。巧合发生了，但这看起来有点过头了。

@zur4ik：看，老实说，你和 OP（假设你不是两个帐户）决定聚在一起发表这篇文章。我个人对回答您的“自己的问题”没有任何问题，将其作为参考点也不是问题，因为它可能对其他访问者有所帮助。我正在争论的事情是它是重复的，我认为这个问题不应该因为这个原因而存在（它也没有表现出在询问之前解决问题的任何努力）

我不明白怎么了。我有相同的内容，这只是复制/粘贴的问题。我只是在Photoshop中修改了图片。我认为不可能在 3 分钟内回答大内容。