即使在滚动时也使元素跟随光标位置

Question

我想要一个元素以其中心跟随光标位置。只要没有滚动，代码就可以工作。一旦页面滚动，元素就会在鼠标移动时“跳开”。有人可以帮助我吗？

 $(document).bind('mousemove', function(e){
   $("div").css({
     top: e.pageY - $("div").height()/2, // just minus by half the height
     left:  e.pageX - $("div").width()/2 // just minus by half the width
   });
 });

Answer 1

不是根据文档的top/left计算的pageX和pageY，而是使用clientX和clientY计算的在浏览器的 top/left 上 chrome。

此外，请注意，在 scroll 和 mousemove 等快速触发的事件处理程序中更新 DOM 可能会导致 [=] 中的性能下降和卡顿44=]。因此，您需要注意确保代码尽可能高效。在这种情况下，您可以缓存 div 将光标保持在事件处理程序之外，这样您就不会在每次事件触发时访问 DOM。同样，你也可以缓存游标的宽度和高度，假设它不是动态更新的。

最后，使用on()代替bind()，因为后者已经弃用了很长时间，将从jQuery的最新版本中删除。

let $cursor = $('.cursor');
let cHeight = $cursor.height() / 2;
let cWidth = $cursor.width() / 2;

$(document).on('mousemove', function(e) {
  $cursor.css({
    top: e.clientY - cHeight,
    left: e.clientX - cWidth
  });
});

body {
  cursor: none;
}

p {
  width: 500px;
  line-height: 1.5em;
}

div {
  position: fixed;
  top: 50px;
  left: 50px;
  padding: 5px;
  background: #eae2e2;
  pointer-events: none;
  mix-blend-mode: difference;
  z-index: 999999 !important;
  font-size: 2.0em;
  color: #141313;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
  sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
  Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos
  et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla
  facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
  laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
  consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue
  nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud
  exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis. At vero eos et accusam et justo
  duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
  diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore
  dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur.</p>

<div class="cursor">cursor</div>

综上所述，还应注意，如果满足您的需要，可以单独使用 CSS 设置自定义光标：https://css-tricks.com/using-css-cursors/#using-a-custom-cursor-to-enhance-an-element

即使在滚动时也使元素跟随光标位置

Make element follows cursor position even while scrolling

jquery

bind

mousemove