【无标题】

欧冠开了

于 2024-07-30 17:28:39 发布

阅读量62

点赞数 2

文章标签： javascript

本文链接：https://blog.csdn.net/ouguankaile/article/details/140801784

版权

js中如果在css样式样式中不添加transform: translateY(-50%);这样的变换，可以直接用const {top,width,} = el.getBoundingClientRect()获取位置，否则就要考虑到transform的影响，可以通过这个写法获取：

/*
getBoundingClientRect() 方法确实可以获取到元素在当前视口的位置，
包括 translate 变换。但是需要注意的是，getBoundingClientRect() 
返回的信息不包括 transform 属性的变换，它只反映了元素最终在屏幕
上的布局信息。
*/

function getTranslatedPosition(element) {
  const style = window.getComputedStyle(element);
  const matrix = new DOMMatrix(style.transform);
  const rect = element.getBoundingClientRect();
 
  const translateX = matrix.m41; // x 方向的 translate 值
  const translateY = matrix.m42; // y 方向的 translate 值
 
  return {
    x: rect.x + translateX,
    y: rect.y + translateY,
    width: rect.width,
    height: rect.height
  };
}