首页 > 文章 > 前端

JS实时监测页面div滚动：dh属性元素可视区域顶部检测

时间：2025-03-05 08:56:58 236浏览收藏

本文介绍如何使用JavaScript实时监测页面中哪个带有`dh`属性的div元素滚动到可视区域顶部。通过Intersection Observer API，高效地监听所有包含`dh`属性的div元素与视口的交叉状态。代码示例演示了如何利用`entry.boundingClientRect.y`属性判断元素的垂直位置，从而精确识别到达视口顶部的元素，即使多个元素同时接近顶部也能准确判断。学习本方法，轻松实现页面滚动监测和目标元素定位。

如何用JavaScript实时监测页面哪个带有dh属性的div元素滚动到可视区域顶部？

如何用JavaScript实时监测页面哪个带有dh属性的div元素滚动到可视区域顶部？

本文介绍如何使用JavaScript代码监测页面滚动，并识别哪个包含dh属性的div元素到达可视区域顶部。页面结构如下所示，多个

元素带有dh属性，用于区分不同的段落：

  a
  ...
b
  ...
  ...
  z
  ...
我们将利用高效的Intersection Observer API来实现此功能。该API可以有效监测目标元素与其祖先元素（通常是视口）的交叉情况。以下代码片段展示了具体实现：
const paragraphs = document.querySelectorAll('div[dh]');

const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    console.log('entry', `${entry.target.getAttribute('dh')}`, entry.boundingClientRect.y);
  });
});

paragraphs.forEach(paragraph => {
  observer.observe(paragraph);
});
这段代码首先选择所有带有dh属性的div元素。然后创建一个IntersectionObserver实例，当目标元素与视口交叉状态发生变化时，回调函数会被触发。entry.boundingClientRect.y属性表示目标元素顶部相对于视口顶部的垂直距离。通过监控该值，我们可以判断哪个段落到达视口顶部。
entry.boundingClientRect.y的值：
正数：元素位于视口下方。
负数：元素位于视口上方。
0：元素顶部与视口顶部重合。
因此，我们需要根据entry.boundingClientRect.y的值来判断哪个段落位于视口顶部。如果有多个值为负数，则取绝对值最大的（即离视口顶部最近的）；如果存在正数，则取负数中最大的。
通过这种方法，我们可以精确追踪页面滚动时，哪个段落到达可视区域顶部。
今天关于《JS实时监测页面div滚动：dh属性元素可视区域顶部检测》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！