javascript - 修改光标 'lags'

Question

我目前正在为我的投资组合网站构建一个修改后的光标。不幸的是，当我尝试滚动和移动光标时，我的光标出现滞后。但是，当我从 HTML、CSS 和 JavaScript 中删除所有其他元素并且只有与我的光标相关的代码 ( https://codepen.io/djaisdjasidj/pen/RwNvePZ ) 时，它会起作用。

// Cursor modified
var cursor = document.getElementById('cursor');
document.addEventListener('mousemove', function(e) {
    e.stopPropagation();
    var x = e.clientX;
    var y = e.clientY;
    cursor.style.left = x + 'px';
    cursor.style.top = y + 'px';
});

// Cursor HOVER modified - When hovering an element
var cursor = document.getElementById('cursor');
var clickableCursor = document.getElementsByClassName('clickableCursor');

for (var i = 0; i < clickableCursor.length; i++) {
    clickableCursor[i].addEventListener('mouseover', () => {
        cursor.style.height = "80px";
        cursor.style.width = "80px";
        cursor.style.animation = "cursorAnimation 5s linear infinite";
        cursor.style.background = "white";
    });
    clickableCursor[i].addEventListener('mouseout', () => {
        cursor.style.height = "40px";
        cursor.style.width = "40px";
        cursor.style.animation = "none";
        cursor.style.border = "2px solid white";
      cursor.style.background = "none";
    });
}

body {
  cursor: none;
}

.container {
  height: 3000px;
  width: 100%;
  position: relative;
  background: orange;
}

#cursor {
  backface-visibility: hidden;
  z-index: 1000000000;
  position: fixed;
  width: 40px;
  height: 40px;
  border: 2px solid white;
  transition: .1s;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  transition-duration: 100ms;
  transition-timing-function: ease-out;
}

#cursor::before {
  content: '';
  position: absolute;
  height: 7px;
  width: 7px;
  border-radius: 100%;
  background-color: white;
}

.clickableCursor {
  font-size: 50px;
  color: white;
  position: fixed;
  background: black;
  padding: 50px
}

.one {
  top: 50px;
  left: 50px;
}

.two {
  top: 50px;
  right: 50px;
}

<div class="container">
  <div id="cursor"></div>
  <p class="clickableCursor one"> Hello </p>
</div>

我的光标的 CSS:

#cursor {
  backface-visibility: hidden;
  z-index: 1000000000;
  position: fixed;
  width: 40px;
  height: 40px;
  border: 2px solid white;
  transition: .1s;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  transition-duration: 100ms;
  transition-timing-function: ease-out;
  }

我的问题是 - 当我有更大的 HTML、CSS 和 JavaScript 文件时，如何防止光标“滞后”？

Answer 1

我遇到了同样的问题，我用这段代码解决了它: (希望对您或其他开发者有所帮助)

$(window).ready(function(){

    let mouseX = 0;
    let mouseY = 0;
    let xp = 0;
    let yp = 0;
  
    $(document).mousemove(function(e){
      $(".custom__cursor__inner").css({
        transform: 'translate(' + (e.clientX - 3.25) + 'px, ' + (e.clientY - 3.25) + 'px)'
      });

      mouseX = e.clientX - 10;
      mouseY = e.clientY - 10;
    });
  
    setInterval(function(){
      xp += ((mouseX - xp)/6);
      yp += ((mouseY - yp)/6);
      $(".custom__cursor__outer").css({transform: 'translateX('+ (xp - 15) +'px) translateY('+ (yp - 15) +'px)'} );
    }, 10);
})

*{
    cursor: none;
}

.custom__cursor__inner{
    height: 7.5px;
    width: 7.5px;
    position: fixed;
    transform: translate(0px, 0px);
    background-color: #F7D883;
    border-radius: 50%;
    transition: height .3s cubic-bezier(0.46,0.03,0.52,0.96), width .3s cubic-bezier(0.46,0.03,0.52,0.96);
    z-index: 5000;
    pointer-events: none;
}

.custom__cursor__outer{
    height: 50px;
    width:  50px;
    border-radius: 50%;
    border: 1px solid #0F1928;
    background-color: transparent;
    position: fixed;
    z-index: 5000;
    transform: translate(0px, 0px);
    pointer-events: none;
    opacity: 0.4;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="custom__cursor__outer">
</div>
<div class="custom__cursor__inner">
</div>