JS监听dh属性div元素顶部可见

本文介绍如何使用JavaScript的IntersectionObserver API实时监测页面滚动，并精准判断哪个带有`dh`属性的div元素到达浏览器可视区域顶部。通过该API异步观察目标元素与视口交叉情况，代码示例演示了如何获取元素距离视口顶部的距离，并找出距离最近的元素，最终输出其`dh`属性值。此方法高效且准确，适用于需要实时监控页面元素位置的场景，例如页面滚动加载或元素定位等。

如何实时监测页面滚动时，带有dh属性的div元素到达浏览器可视区域顶部？

本文将演示如何利用JavaScript的IntersectionObserver API高效监测页面滚动，实时判断哪个带有dh属性的div元素顶部与浏览器可视区域顶部重合。假设页面结构如下：

<div>
  <div dh="a">a</div>
  <ul h="a"><li>...</li></ul><div dh="b">b</div>
  <ul h="b"><li>...</li></ul>
  ...
  <div dh="z">z</div>
  <ul h="z"><li>...</li></ul></div>

IntersectionObserver API 提供了一种异步观察目标元素与其祖先元素或视口交叉情况的方法，非常适合此类场景。

以下代码片段展示了如何使用IntersectionObserver实现目标：

const divs = document.querySelectorAll('div[dh]');

const observer = new IntersectionObserver(entries => {
  let topElement = null;
  let minDistance = Infinity;

  entries.forEach(entry => {
    const distance = entry.boundingClientRect.top;
    const dhValue = entry.target.getAttribute('dh');

    if (distance < minDistance) {
      minDistance = distance;
      topElement = dhValue;
    }
  });

  console.log('到达视口顶部的元素：', topElement);
});

divs.forEach(div => {
  observer.observe(div);
});

代码首先选取所有具有dh属性的div元素。然后创建一个IntersectionObserver实例，回调函数中，entry.boundingClientRect.top获取元素顶部距离视口顶部的垂直距离。entry.target.getAttribute('dh')获取元素的dh属性值，用于识别元素。

代码通过比较entry.boundingClientRect.top的值，找出距离视口顶部最近的元素，并将其dh属性值输出到控制台。 entry.boundingClientRect.top为正数表示元素在视口下方，为负数表示元素在视口上方，因此直接取最小值即可判断哪个元素顶部最接近视口顶部。

通过此方法，我们可以实时跟踪每个div元素相对于视口的位置，准确判断哪个元素到达了视口顶部。

终于介绍完啦！小伙伴们，这篇关于《JS监听dh属性div元素顶部可见》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！