问题：

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

艾心远

2024-07-26

例如如下代码

<!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">滚动事件

共有3个答案

徐俊楚

2024-07-26

感觉跟这个问题比较像，可以参考下
JS可以获取某元素当前视口内的数据吗？
https://segmentfault.com/q/1010000044490321/a-1020000044491337

陶刚豪

2024-07-26

参考这个 getBoundingClientRect api，来获取基于试图的坐标位置。

https://developer.mozilla.org/zh-CN/docs/Web/API/Element/getB...

澹台阳秋

2024-07-26

在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就足够了。

类似资料：

如何使用JavaScript滚动到某个元素？

问题内容：我正在尝试将页面移至某个元素。我尝试下一个代码无济于事：问题答案：您可以使用锚点来“聚焦” div。即：然后使用以下javascript：
原生javascript获取元素样式

本文向大家介绍原生javascript获取元素样式，包括了原生javascript获取元素样式的使用技巧和注意事项，需要的朋友参考一下摘要：我们在开发过程中经常会遇到通过js获取或者改变DOM元素的样式，方法有很多，比如：通过更改DOM元素的class。现在我们讨论原生js来获取DOM元素的CSS样式，注意是获取不是设置在开始之前先说下获取最终应用在元素上的所有CSS属性对象
如何滚动到元素？

问题内容：我有一个聊天小部件，每次向上滚动时，它都会拉出一系列消息。我现在面临的问题是加载消息时滑块固定在顶部。我希望它专注于上一个数组中的最后一个索引元素。我发现可以通过传递索引来创建动态引用，但是我还需要知道使用哪种滚动功能来实现这一点问题答案：单击此处，获得有关StackBlits的完整演示 React 16.3 +，Class组件类组件-Ref回调不要使用字符串引用。字符串引用
如何选择js中元素的所有li子元素

如何选择js中元素的所有li子元素我想选择这个项目的所有li元素（直接子元素，盛大子元素）
javascript - 这种监测某元素滚动位置的js代码如何写？

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

问题内容：我有一个滚动条，当我单击它时我想要一个链接，它将迫使其滚动以查看其中的元素。我这样写它的JavasSript：但这会在滚动页面的同时滚动所有页面。如何解决？我想这样说问题答案：您需要获取要滚动到视图中的元素相对于其父元素（滚动div容器）的顶部偏移量：现在，将变量topPos设置为滚动div的顶部与希望显示的元素之间的距离（以像素为单位）。现在，我们告诉div使用以下命令滚

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

共有3个答案

相关问答

相关文章

相关阅读

相关工具

相关文档