div根据父div而不是pageY跟随光标

Question

我怎样才能让div跟随光标而不是基于页面高度，我目前拥有的方式是div远离光标，因为我滚动，我需要它始终与它在一起，我尝试了一些事情，但似乎没有工作。这是我所做的链接https://www.poshcloud.co.uk/posh-hero/

这是我使用的函数

document.addEventListener('mousemove', function(e) {
const circle = document.querySelector('.cursor__ball--big');
const left = e.pageX;
const top = e.pageY;
circle.style.left = left + 'px';
circle.style.top = top + 'px';
});

Answer 1

使用clientX和clientY应该可以解决您的问题

document.addEventListener('mousemove', function(e) {
const circle = document.querySelector('.cursor__ball--big');
const left = e.clientX;
const top = e.clientY;
circle.style.left = left + 'px';
circle.style.top = top + 'px';
});

.cursor__ball--big {
background-color: red;
height: 100px;
width: 100px;
border-radius: 50px;
position: absolute;
left: 0;
top: 0;
transform: translate(-50%, -50%);
}

<div class="cursor__ball--big"></div>