使用element.getBoundingClientRect()本身返回相对于视窗的top和left值，如您所发现的。如果您希望它们相对于文档（并且不受滚动位置的影响），您可以使用window.scrollY和window.scrollX添加滚动位置，如下所示：

const rect = element.getBoundingClientRect()

rect.left                   // (relative to viewport)
rect.top                    // (relative to viewport)
rect.left + window.scrollX  // (relative to document)
rect.top + window.scrollY   // (relative to document)

Source。

下面是一个ES6方法，它返回与getBoundingClientRect()相同的所有属性，但相对于整个文档。

const getOffsetRect = (el) =>

  let rect   = el.getBoundingClientRect();

  // add window scroll position to get the offset position
  let left   = rect.left   + window.scrollX;
  let top    = rect.top    + window.scrollY;
  let right  = rect.right  + window.scrollX;
  let bottom = rect.bottom + window.scrollY;

  // polyfill missing 'x' and 'y' rect properties not returned
  // from getBoundingClientRect() by older browsers
  let x = rect.x === undefined ? left : rect.x + window.scrollX;
  let y = rect.y === undefined ? top : rect.y + window.scrollY;

  // width and height are the same
  let width  = rect.width;
  let height = rect.height;

  return { left, top, right, bottom, x, y, width, height };
};

注意：它还对x和y属性进行多边形填充，旧版浏览器不会从getBoundingClientRect（）返回这些属性