Hello! 欢迎来到小浪资源网!


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


avatar
1986424546 2024-11-17 11

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

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

要在可滚动元素(如

)中获取具有特定属性(如 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`   ); });

监测滚动事件

要监测

的滚动事件,可以使用 addeventlistener 方法监听 scroll 事件。

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

相关阅读