以光标为中心的 Div答案

【问题标题】：Div to be centered over cursor以光标为中心的 Div
【发布时间】：2018-07-26 08:29:40
【问题描述】：

我正在尝试使用设置为跟随光标的<div> 创建自定义光标。

在下面的 sn-p 中，这运行得非常好，但是当向下滚动页面时，div 直到滚动移动完成后才会跟随，从而导致移动和感觉生涩。

有没有办法确保不会发生这种情况，并且<div> 无论如何都会完美地跟随光标？

// vars
var $cursor = $('.custom-cursor');

// Follow cursor
$('body').on('mousemove', function(e) {
  var parentOffset = $(this).offset();
  var relX = e.pageX - parentOffset.left;
  var relY = e.pageY - parentOffset.top;
  $cursor.css({
    left: relX,
    top: relY
  });
});

body {
  background: red;
  height: 1000vh;
  position: relative;
}

.custom-cursor {
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 100%;
  z-index: 9999;
  background-color: yellow;
  backface-visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, -50%); // Center over cursor
  transition: width .3s ease-in-out, height .3s ease-in-out;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <div class="custom-cursor">
  </div>
</body>

【问题讨论】：

请使用 SO sn-p 代替 codepen :)
您的 codepen 一直在重新加载。您能否修复它并顺便使用 StackOverflow sn-p
尝试将定位 div 的代码也放在 scroll 事件中。
恐怕不行@Programmer
这是一个疯狂的 + hacky 跨浏览器想法：带有光标代码的不可滚动正文。以及包含其余内容的可滚动 div。

标签： javascript jquery css cursor

【解决方案1】：

检查此更新的代码。希望对你有帮助。

   

var $cursor = $('.custom-cursor');

   // Follow cursor
   var xMousePos = 0;
   var yMousePos = 0;
   var lastScrolledLeft = 0;
   var lastScrolledTop = 0;

   $(document).mousemove(function(event) {
       captureMousePosition(event);
   })

   $(window).scroll(function(event) {
       if (lastScrolledLeft != $(document).scrollLeft()) {
           xMousePos -= lastScrolledLeft;
           lastScrolledLeft = $(document).scrollLeft();
           xMousePos += lastScrolledLeft;
       }
       if (lastScrolledTop != $(document).scrollTop()) {
           yMousePos -= lastScrolledTop;
           lastScrolledTop = $(document).scrollTop();
           yMousePos += lastScrolledTop;
       }
       $cursor.css({
           left: xMousePos,
           top: yMousePos
       });
   });

   function captureMousePosition(event) {
       xMousePos = event.pageX;
       yMousePos = event.pageY;
       $cursor.css({
           left: xMousePos,
           top: yMousePos
       });
   }

body {
  background: red;
  height: 1000vh;
  position: relative;
}

.custom-cursor {
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 100%;
  z-index: 9999;
  background-color: yellow;
  backface-visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, -50%); // Center over cursor
  transition: width .3s ease-in-out, height .3s ease-in-out;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <div class="custom-cursor">
  </div>
</body>

【讨论】：

嗨，凯坦。这运行良好，但有时仍会“跳跃”一点，有什么办法可以改善吗？不知道是什么原因造成的？

【解决方案2】：

在您的代码中插入此代码：

$( window ).scroll(function() {
  //Your mouse move function
});

要获取鼠标滚动时的当前位置，请使用Get mouse position on scroll。

这里是fiddle http://jsfiddle.net/1byfq24g/的链接和实现的代码。

// vars
var xMousePos = 0;
var yMousePos = 0;
var lastScrolledLeft = 0;
var lastScrolledTop = 0;
var $cursor = $('.custom-cursor');

// Follow cursor
$('body').on('mousemove', function(e) {
  var parentOffset = $(this).offset();
  var relX = e.pageX - parentOffset.left;
  var relY = e.pageY - parentOffset.top;
  xMousePos = relX;
  yMousePos = relY;

  $cursor.css({
    left: relX,
    top: relY
  });
});
$(window).scroll(function(event) {
  if (lastScrolledLeft != $(document).scrollLeft()) {
    xMousePos -= lastScrolledLeft;
    lastScrolledLeft = $(document).scrollLeft();
    xMousePos += lastScrolledLeft;
  }
  if (lastScrolledTop != $(document).scrollTop()) {
    yMousePos -= lastScrolledTop;
    lastScrolledTop = $(document).scrollTop();
    yMousePos += lastScrolledTop;
  }
  console.log("x = " + xMousePos + " y = " + yMousePos);
  $cursor.css({
    left: xMousePos,
    top: yMousePos
  });
});

body {
  background: red;
  height: 1000vh;
  position: relative;
}

.custom-cursor {
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 100%;
  z-index: 9999;
  background-color: yellow;
  backface-visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, -50%); // Center over cursor
  transition: width .3s ease-in-out, height .3s ease-in-out;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>

<body>
  <div class="custom-cursor">
  </div>
</body>

【讨论】：

感谢您的回答，您能否根据我的原始代码将其翻译成一个工作示例？
好的，我一定会为此发布一个小提琴。
给你！如果满足需要，请点赞并采纳。
非常感谢，效果很好。它仍然不是 100% 完美，并且 div 有时会移动一点，但通常要好得多。有什么可以改进的吗？ -7.5 又是什么？
-7.5 是使其居中的因素。

【解决方案3】：

这是一个非常晚的答案，但我一直在做一些非常相似的事情，并且遇到了同样的问题。我发现最简单的解决方案是避免所有 js 滚动动画，只需将光标设置为 position:fixed; 在 css 中，它完全解决了你的问题。我猜测的修复来自这样一个事实，即在修复期间它总是与视口相关，而不是文档本身。无论如何它是有效的。

// vars
var $cursor = $('.custom-cursor');

// Follow cursor
$('body').on('mousemove', function(e) {
  var relX = e.clientX;
  var relY = e.clientY;
  $cursor.css({
    left: relX,
    top: relY
  });
});

body {
  background: red;
  height: 1000vh;
  position: relative;
}

.custom-cursor {
  position: fixed;
  width: 30px;
  height: 30px;
  border-radius: 100%;
  z-index: 9999;
  background-color: yellow;
  backface-visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, -50%); // Center over cursor
  transition: width .3s ease-in-out, height .3s ease-in-out;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <div class="custom-cursor">
  </div>
</body>

【讨论】：