Question

我在搜索中找到了this example。

但它没用，因为当网页长度较长，且我的<div>块不在顶部时，当我滚动页面时，不同的距离会有不同的PageY或{ {1}}，因此可移动clientY无法完全跟随鼠标光标。

这是我到目前为止所尝试的内容：

<div>

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");

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

2 个答案: