js原生如何取某可滚动元素中的子元素坐标值?

例如如下代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Popup Example</title>
<style>
html {
  font-size: 5.33333vw;
}

section.main {
  position: relative;
}
section.main header {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 999;
  height: 2.25rem;
  background-color: #e1e1e1;
}
section.main section.pop {
  position: absolute;
  width: 100%;
  background-color: #f3f3f3;
  left: 0;
  right: 0;
  z-index: 88;
  overflow: auto;
}
section.main section.pop.one {
  height: 25rem;
}
section.content {
  position: relative;
  z-index: 66;
  background-color: #fff;
  top: 2.25rem;
  left: 0;
  right: 0;
}
</style>
</head>
<body>
<section class="main">
  <header>固定头部</header>
  <section class="pop one" id="pop">
    <ul>
      <li pdata=1 id="pop1">pop1</li><li>1</li><li>1</li><li>1</li><li>1</li>
      <li pdata=2 id="pop2">pop2</li><li>1</li><li>1</li><li>1</li><li>1</li>
      <li pdata=3 id="pop3">pop3</li><li>1</li><li>1</li><li>1</li><li>1</li>
      <li pdata=4 id="pop4">pop4</li><li>1</li><li>1</li><li>1</li><li>1</li>
      <li pdata=5 id="pop5">pop5</li><li>1</li><li>1</li><li>1</li><li>1</li>
      <li pdata=6 id="pop6">pop6</li><li>1</li><li>1</li><li>1</li><li>1</li>
      <li pdata=7 id="pop7">pop7</li><li>1</li><li>1</li><li>1</li><li>1</li>
      <li pdata=8 id="pop8">pop8</li><li>1</li><li>1</li><li>1</li><li>1</li>
      <li pdata=9 id="pop9">pop9</li><li>1</li><li>1</li><li>1</li><li>1</li>
      <li pdata=10 id="pop10">pop10</li><li>1</li><li>1</li><li>1</li><li>1</li>
    </ul>
  </section>
</section> 
<section class="content">
  <ul>
    <li>1x</li><li>1</li><li>1</li><li>1</li><li>1</li>
    <li>2x</li><li>1</li><li>1</li><li>1</li><li>1</li>
    <li>3x</li><li>1</li><li>1</li><li>1</li><li>1</li>
    <li>4x</li><li>1</li><li>1</li><li>1</li><li>1</li>
    <li>5x</li><li>1</li><li>1</li><li>1</li><li>1</li>
    <li>1x</li><li>1</li><li>1</li><li>1</li><li>1</li>
    <li>2x</li><li>1</li><li>1</li><li>1</li><li>1</li>
    <li>3x</li><li>1</li><li>1</li><li>1</li><li>1</li>
    <li>4x</li><li>1</li><li>1</li><li>1</li><li>1</li>
    <li>5x</li><li>1</li><li>1</li><li>1</li><li>1</li>
  </ul>
</section>
</body>
</html>

js原生如何获取<section class="pop one" id="pop">中的li有pdata属性的对象的坐标值，比如每个对象的顶部坐标值，另外监测<section class="pop one" id="pop">滚动事件

javascript

阅读 1.6k

AI BotBETA

在JavaScript中，要获取某个可滚动元素中子元素的坐标值（特别是相对于视口或文档的位置），你需要考虑几个因素：

子元素相对于其最近的可定位祖先元素（即position属性不为static的元素）的位置。
可滚动元素自身滚动的距离（即其scrollTop或scrollLeft的值）。
可滚动元素相对于视口或文档的位置。

以下是如何使用JavaScript来获取<section class="pop one" id="pop">中带有pdata属性的<li>元素的顶部坐标值，并监测该可滚动元素的滚动事件的步骤：

// 获取可滚动元素
var scrollableElement = document.getElementById('pop');

// 添加滚动事件监听器
scrollableElement.addEventListener('scroll', function() {
    // 滚动事件发生时执行的代码
    console.log('Scrolled!', this.scrollTop); // 打印滚动距离
    updatePositions(); // 更新所有li的位置（如果需要）
});

// 更新所有带有pdata属性的li的顶部坐标值
function updatePositions() {
    var liElements = Array.from(scrollableElement.getElementsByTagName('li')).filter(function(li) {
        return li.getAttribute('pdata'); // 只选择带有pdata属性的li
    });

    liElements.forEach(function(li) {
        // 获取li相对于其最近的可定位祖先元素（即pop元素）的顶部位置
        var rect = li.getBoundingClientRect();
        
        // 获取pop元素的滚动距离
        var scrollTop = scrollableElement.scrollTop || document.documentElement.scrollTop;

        // li相对于视口的顶部坐标 = li相对于pop的顶部坐标 + pop的滚动距离
        var topPosition = rect.top + scrollTop;

        // 输出或处理顶部坐标值
        console.log('Element ID:', li.id, 'Top Position:', topPosition);
    });
}

// 初始时更新位置
updatePositions();

请注意，getBoundingClientRect()返回的是一个DOMRect对象，它提供了元素的大小及其相对于视口的位置。然后，我们通过添加滚动元素的scrollTop值来获取元素相对于文档的顶部位置。

如果你想要相对于整个文档的位置而不是视口，你还需要考虑文档滚动（即document.documentElement.scrollTop或document.body.scrollTop，取决于你的布局和浏览器）。然而，在大多数情况下，对于可滚动元素内的元素，getBoundingClientRect().top + scrollTop就足够了。

2 个回答

得票最新