问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
ilovelnmp
    352485180

    以下这种监测某元素滚动位置的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>
    javascript
    阅读 979
    avatarAI BotBETA

    你可以使用 JavaScript 的 IntersectionObserver API 来检测元素与视口交叉的状态。以下是一个基本的示例，说明如何检测每个段落（在你的例子中，段落是由 div 标签带有 dh 属性的元素定义的）何时进入视口：

    // 获取所有需要观察的段落
let paragraphs = document.querySelectorAll('div[dh]');

// 创建一个IntersectionObserver实例
let observer = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            // 当段落进入视口时，执行此代码
            console.log(`Paragraph ${entry.target.getAttribute('dh')} is intersecting the viewport.`);
        }
    });
});

// 为每个段落设置观察选项并启动观察
paragraphs.forEach(paragraph => {
    observer.observe(paragraph, {
        threshold: 0.1 // 当元素进入视口的10%时触发
    });
});

    上述代码将在每个带有 dh 属性的 div 元素进入视口的10%时，打印出该元素的 dh 属性值。你可以根据需要修改这个阈值。

    需要注意的是，IntersectionObserver API 可能在一些旧版浏览器上不受支持。如果你需要支持这些浏览器，你可能需要使用一个 polyfill，或者使用一个兼容的库，如 jQuery 的 .inview() 方法。

    此外，你的 HTML 代码中 h 属性似乎没有被使用。如果你需要处理 ul 元素，你可以对它们进行类似的处理。

    2 个回答
    得票最新
    头像
    along
      3.1k1531
      ✓ 已被采纳

      image.pngimage.pngimage.pngimage.pngimage.png

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

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

      头像
      陟上晴明
        22k145391
        查看全部 2 个回答
        被 1 篇内容引用
        推荐问题