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

Question

我在搜索中找到了这个示例 。

但这是没有用的，因为当网页的高度clientY并且<div>块不在顶部时，当我滚动页面时， 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> 

Answer 2

我用另一种方法解决了这个问题。 在X轴上，我们可以这样做。

内容表示您的主程序宽度，代码适应所有分辨率。

var widthContent = jQuery("#content").width();
jQuery("#floatTip").css("left", _xx - (window.screen.width - widthContent)/2 + "px");