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

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

要在可滚动元素（如 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`
  );
});

监测滚动事件

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

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

以上就是JS原生如何获取可滚动元素内子元素的精确坐标？的详细内容，更多请关注硕下网其它相关文章！