使用offsetTop或getBoundingClientRect().top返回值异常问题求助

你遇到的这个问题其实挺典型的——JavaScript完全有能力篡改getBoundingClientRect()和offsetTop这类DOM API，这大概率就是你在原页面和空白页得到不同结果的核心原因。

为什么会出现这种差异？ #

当你把元素复制到about:blank页面时，页面里没有原项目的任何脚本（包括虚拟DOM库或第三方注入脚本），调用的是浏览器原生的API，返回的值自然和截图工具测量的一致；而在原页面中，可能有代码重写了这些API的行为，导致返回值偏离真实像素位置。

具体的篡改方式 #

1. 重写getBoundingClientRect()方法
   这个方法挂载在Element.prototype上，任何脚本都可以直接修改它，比如：

   // 示例：篡改getBoundingClientRect返回偏移值
   const originalGetBCR = Element.prototype.getBoundingClientRect;
   Element.prototype.getBoundingClientRect = function() {
     const rect = originalGetBCR.call(this);
     // 故意修改top值
     return { ...rect, top: rect.top + 20 };
   };
   

2. 修改offsetTop的访问器属性
   offsetTop是Element的访问器属性（通过getter获取值），可以通过Object.defineProperty篡改它的getter逻辑：

   // 示例：篡改offsetTop的返回值
   Object.defineProperty(Element.prototype, 'offsetTop', {
     get() {
       // 返回自定义计算的值，而非原生结果
       return 0;
     }
   });
   

结合虚拟DOM库的可能性 #

你提到用了虚拟DOM库，主流虚拟DOM库（比如React、Vue）本身不会平白无故篡改这些API，但如果你的项目引入了第三方脚本（比如广告插件、统计工具、反爬脚本），或者自定义了DOM扩展逻辑，就有可能触发这种篡改行为。

如何验证API是否被篡改？ #

在原页面的浏览器控制台执行以下命令，和about:blank页面的输出对比：

• 检查getBoundingClientRect()是否被修改：

  console.log(Element.prototype.getBoundingClientRect.toString());
  

  原生的输出应该是类似function getBoundingClientRect() { [native code] }，如果显示自定义的函数体，说明被篡改了。

• 检查offsetTop的getter：

  console.log(Object.getOwnPropertyDescriptor(Element.prototype, 'offsetTop'));
  

  原生的get属性应该指向原生代码，若显示自定义函数，说明被篡改。

临时解决方法 #

如果确认API被篡改，你可以创建一个未被污染的环境来获取真实值：

• 新建一个隐藏的iframe，加载空白页面，在iframe中获取原生API，再用于原页面的元素计算；
• 直接通过元素的父元素递归计算偏移量，手动实现类似offsetTop的逻辑。

内容的提问来源于stack exchange，提问作者user1506145