Question

我正在尝试使用<div>创建一个自定义游标，该游标设置为跟随游标。

在下面的代码段中，这确实工作得很好，但是在向下滚动页面时，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>

Answer 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>

Answer 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>

Answer 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>

将Div置于光标的中心

3 个答案: