Question

我正在寻找一个跟踪鼠标光标的div，我在这里找到了解决方案，但是现在div在滚动时没有跟进鼠标，有什么想法吗？

<script type="text/javascript">

function getMouseCoords(e) {
var e = e || window.event;
document.getElementByTagName('body').innerHTML = e.clientX + ', ' + 
       e.clientY + '<br>' + e.screenX + ', ' + e.screenY;
}


var followCursor = (function() {
var s = document.createElement('div');
s.style.position = 'absolute';
s.style.margin = '0';
s.style.padding = '10px';
s.style.border = '1px solid black';
s.style.animationTime = "2.5s";
s.style.webkitTransform = "rotate(45deg)";
s.style.zIndex = "9999999999";

return {
init: function() {
  document.body.appendChild(s);
},

run: function(e) {
  var e = e || window.event;
  s.style.left  = (e.clientX - 15) + 'px';
  s.style.top = (e.clientY - 10) + 'px';
  getMouseCoords(e);
}
};
}());

window.onload = function() {
followCursor.init();
document.body.onmousemove = followCursor.run;
}

</script>

我现在不知道如何解决这个问题，我刚开始学习，所以任何帮助都会受到赞赏。

Answer 1

将位置从绝对更改为固定。 https://codepen.io/anon/pen/mXLLJK

s.style.position = 'fixed';

Answer 2

使用scrollTop，您可以将用户从顶部向下滚动的距离相加：

document.documentElement.scrollTop

https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTop

您可以在onscroll事件中添加它：

https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onscroll

Div跟随光标onmousemove

2 个答案: