这种监测某元素滚动位置的js代码如何写？

作者站长头像
站长
· 阅读数 21

以下这种监测某元素滚动位置的js代码如何写？html代码如下，如何通过window.scroll侦测下面某个段落的top至bottom部分正与页面可视区域的顶部接触，也就是想知道，滑动经过可视区域的顶部的当前是哪个段落？

<body>
<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>
</body>
回复
1个回答
avatar
test
2024-06-20

answer imageanswer imageanswer imageanswer imageanswer image

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);
    });

距离顶部距离，都为正数时取最小值，都为负数时取最大值，存在正负数时，取负数最大值

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引，对解决问题有帮助
  • 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容