在鼠标悬停时动态创建图像叠加层

Question

我被分配了基本上将Pinterests保存按钮的功能复制为Chrome扩展程序的任务。

我已经编码了大部分扩展名，但是在创建图像的保存按钮覆盖图时遇到了问题。

我正在尝试从鼠标悬停侦听器中使用此功能，该侦听器会自动附加到页面加载时的所有图像。

虽然我可以创建overlay div并将其正确放置，但是一旦发生页面滚动，它就不能正确放置。

function imageMouseOver(){
    var rect = this.getBoundingClientRect();
    console.log(rect.top, rect.right, rect.bottom, rect.left);
    var customPos = getPosition(this);
    console.log(customPos);
    var pinitDiv = document.createElement("div");
    pinitDiv.setAttribute('id','osmPinit');
    pinitDiv.style.position = 'absolute';
    pinitDiv.style.top = rect.top+'px';
    pinitDiv.style.left = rect.left+'px';
    pinitDiv.style.margin = '10px';
    pinitDiv.style.backgroundColor = 'red';
    pinitDiv.style.zIndex = '1000';
    pinitDiv.append("This is some text");
    document.body.append(pinitDiv);
}

我尝试使用getBoundingClientRect（）中的详细信息和一个名为getPosition的自定义函数。下面是自定义功能

function getPosition(el) {
  var xPos = 0;
  var yPos = 0;

  while (el) {
    if (el.tagName == "BODY") {
      // deal with browser quirks with body/window/document and page scroll
      var xScroll = el.scrollLeft || document.documentElement.scrollLeft;
      var yScroll = el.scrollTop || document.documentElement.scrollTop;

      xPos += (el.offsetLeft - xScroll + el.clientLeft);
      yPos += (el.offsetTop - yScroll + el.clientTop);
    } else {
      // for all other non-BODY elements
      xPos += (el.offsetLeft - el.scrollLeft + el.clientLeft);
      yPos += (el.offsetTop - el.scrollTop + el.clientTop);
    }

    el = el.offsetParent;
  }
  return {
    x: xPos,
    y: yPos
  };
}