如何观察用户在网页中查看的当前部分？

Posted 2023-03-05

【中文标题】如何观察用户在网页中查看的当前部分？

【英文标题】：How can I observe the current section being viewed by a user in a web page?

【发布时间】：2016-04-24 05:29:20

【问题描述】：

当用户查看网页时，他们通过滚动导航到页面的不同部分。在Bootstrap's documentation 中，bs-docs-sidenav 列表项会更改颜色以反映当前处于“活动”状态的部分（在屏幕上可见）。

这种类型的观察是否有名称（或名称）？ DOM 是否具有跟踪元素位置的任何属性？ 如果没有，是否有任何常用插件/小型库可以利用这些信息？

【问题讨论】：

我认为这里有人问过类似的问题：***.com/questions/7790725/…

嗨@neallred - 你链接到的问题是关于跟踪鼠标位置。我正在寻找详细说明如何在到达视口顶部时观察网页部分（部分有时用<h2 id="mySection">My Section</h2> 标识）的资源。

This 是一个类似的问题。我现在正在考虑的跟踪节点的方法是注册每个“部分”并使用 getBoundingClientRect 函数来跟踪注册的部分并确定哪个部分是“活动的”。

【参考方案1】：

原来 Bootstrap 有一个名为 Scrollspy 的插件。 getBoundingClientRect function 可用于查找元素位置。