javascript - 滚动页面时如何准确定位 div 相对于鼠标指针的位置？

Question

我找到了this example在我的搜索中。

但是没有用，因为当网页高度很长时，我的<div> block 不在顶部，当我滚动页面时，有不同的距离 PageY或clientY ，所以可移动<div>无法精确跟随鼠标光标。

这是我迄今为止尝试过的:

jQuery("#requestStatusChart").mouseover(function (event) {
  var maskVal = '<span id="floatTip" style="position:absolute"><span id="hintdivlogistics" class="RMAHintdivlogistics">' +
  +'</span><div class="clear"></div></span>';
  jQuery(this).find(".DashboardMask").append(maskVal)
  ShowHintInfoLogistics("abc");

  //when onmouse out ,remove the elements I appended before.
  jQuery(this).find(".DashboardMask").mouseout(function () {

    if (typeof jQuery("#hintdivlogistics") != undefined) {
      jQuery("#floatTip").fadeOut("slow").remove();
    }
  });

  //move current row
  jQuery(this).find(".DashboardMask").mousemove(function (event) {

    _xx = event.clientX;
    _yy = event.clientY;

    _yyPage = event.pageY;

    var pos = jQuery(this).position();
    console.log((pos.left + " " + pos.top));

    jQuery("#floatTip").css({ "top": _yy + "px", "left": _xx - 180 + "px",
        "border": "2px solid red"
    }).fadeIn("slow");
    console.log("x:" + _xx + ",y:" + _yy / _yyPage * _yy);

    return false;
  });

  return false;
});

Answer 1

鉴于您在没有鼠标事件的情况下不知道鼠标的位置，我不知道有什么方法可以可靠地做到这一点。您可以跟踪 mousemove 上的鼠标位置，但正如此代码片段所示，它远非理想。

function mousemoved(event) {
  var f = document.querySelector('#floater');
  console.log(event);
  f.style.top = event.pageY + f.scrollTop + 'px';
  f.style.left = event.pageX + 'px';
}

document.querySelector('#container').addEventListener('mousemove', mousemoved);

#container {
  overflow: scroll;
  position: relative;
}

#content {
  height: 4000px;
  background: lightblue;
}

#floater {
  position: absolute;
  border: 1px solid black;
  padding: 1em 2em;
}

<div id="container">
  <div id="floater">Hi</div>
  <div id="content">content just to make the container taller</div>
</div>