JS原生如何获取可滚动元素内子元素的精确坐标？

你在学习文章相关的知识吗？本文《JS原生如何获取可滚动元素内子元素的精确坐标？》，主要介绍的内容就涉及到，如果你想提升自己的开发能力，就不要错过这篇文章，大家要知道编程理论基础和实战操作都是不可或缺的哦！

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

要在可滚动元素（如 <section class="pop one" id="pop">）中获取具有特定属性（如 pdata）的子元素的坐标值，可以使用原生 javascript 的 getboundingclientrect api。

该 api 返回一个 domrect 对象，其中包含元素相对于其包含块的边界框的顶部、左、右和底部坐标值。

const popcontainer = document.getelementbyid('pop');
const lielements = popcontainer.queryselectorall('li[pdata]');

lielements.foreach((li) => {
  const boundingbox = li.getboundingclientrect();

  console.log(
    `li element (pdata=${li.getattribute('pdata')}):`,
    `top: ${boundingbox.top}px, left: ${boundingbox.left}px`
  );
});

监测滚动事件

要监测 <section class="pop one" id="pop"> 的滚动事件，可以使用 addeventlistener 方法监听 scroll 事件。

popContainer.addEventListener('scroll', () => {
  // Element has scrolled.
});

今天关于《JS原生如何获取可滚动元素内子元素的精确坐标？》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！