javascript - 每次加载新页面时，自定义光标都会重置到页面的左上角

Question

我的网站上有一个自定义光标，它与一件事完全不同。单击进入新页面时，当页面加载时，无论您将鼠标留在页面上的哪个位置，光标都会自行重置到页面的左上角，然后一旦您移动鼠标，光标就会移回鼠标所在的位置。我尝试从 CSS 中删除“top”和“left”，但问题仍然存在。我看不出是什么导致了这种情况发生，我只需要光标停留在鼠标在页面上的位置，并且每次导航到新页面时都不会重置。

jQuery(document).ready(function($) {
let cursor = document.querySelector('#custom-cursor');

    if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|Windows Phone/i.test(navigator.userAgent)) {
    $('#custom-cursor').remove();
}
else { cursor.style.display = 'block';}

document.addEventListener('mousemove', evt => {
    
  let { clientX: x, clientY: y } = evt;
  let scale = 1;
  
  if (evt.target.matches('a,span,[onclick],img,video,i')) {
    cursor.classList.add('active');
    scale = 0.5;
  } else {
    cursor.classList.remove('active');
  }
  
  cursor.style.transform = `translate(${x}px, ${y}px) scale(${scale})`;
  
});
});

* {
  cursor: none;
}

#custom-cursor {
  display: none;
  position: fixed;
  width: 20px; height: 20px;
  top: -10px;
  left: -10px;
  border: 2px solid black;
  border-radius: 50%;
  opacity: 1;
  background-color: #fb4d98;
  pointer-events: none;
  z-index: 99999999;
  transition:
    transform ease-out 0.15s,
    border 0.5s,
    opacity 0.5s,
    background-color 0.5s;
}
#custom-cursor.active {
  opacity: 0.5;
  background-color: #000;
  border: 2px solid #fb4d98;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="custom-cursor"></div>

标签： javascripthtmljquerycss

Answer 1

如另一个答案所示，使用普通的 CSS 光标，并在第一个鼠标事件中用你喜欢的光标替换它：

jQuery(document).ready(function($) {
  let cursor = document.querySelector('#custom-cursor');

  document.addEventListener('mousemove', evt => {
    document.body.classList.add('custom-cursor-moved')

    if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|Windows Phone/i.test(navigator.userAgent)) {
      $('#custom-cursor').remove();
    } else {
      cursor.style.display = 'block';
    }


    let {
      clientX: x,
      clientY: y
    } = evt;
    let scale = 1;

    if (evt.target.matches('a,span,[onclick],img,video,i')) {
      cursor.classList.add('active');
      scale = 0.5;
    } else {
      cursor.classList.remove('active');
    }

    cursor.style.transform = `translate(${x}px, ${y}px) scale(${scale})`;

  });
});

body {
  height: 100vh;
}

html,
body {
  margin: 0;
  padding: 0;
}

* {
  cursor: url(https://i.stack.imgur.com/7pmmV.png) 0 0, auto;
}

.custom-cursor-moved,
.custom-cursor-moved * {
  cursor: none !important;
}

#custom-cursor {
  display: none;
  position: fixed;
  width: 20px;
  height: 20px;
  top: -10px;
  left: -10px;
  border: 2px solid black;
  border-radius: 50%;
  opacity: 1;
  background-color: #fb4d98;
  pointer-events: none;
  z-index: 99999999;
  transition: transform ease-out 0.15s, border 0.5s, opacity 0.5s, background-color 0.5s;
}

#custom-cursor.active {
  opacity: 0.5;
  background-color: #000;
  border: 2px solid #fb4d98;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="custom-cursor"></div>

Try me.<br> Try me.

它需要一些修改（更好的光标图像，修复热点等）但它可以工作。

做这样的事情时要非常非常小心。尽量不要破坏任何辅助工具，请不要假设 Android/某些特定的用户代理有触摸屏等。使用适当的 API。