div follow cursor based on parent div not pageY

Question

How can i get the div to follow the cursor not based on page height, the way i currently have it the div gets further away from the cursor as i scroll, i need it to stay with it at all times, i have tried a few things but none seem to work. here is a link to what i have made https://www.poshcloud.co.uk/posh-hero/

this is the function im using

    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';
});

Use **clientX** and **clientY** instead of **pageX** and **pageY**. [example](https://stackoverflow.com/questions/6073505/what-is-the-difference-between-screenx-y-clientx-y-and-pagex-y) — Lapskaus, Jan 16 '23 at 10:48
Please show us the relevant HTML structure, particularly where the cursor ball big lies within it. You probably need clientX etc but can’t be sure without knowing what the circle is placed within. — A Haworth, Jan 16 '23 at 10:51

score 2 · Accepted Answer · answered Jan 16 '23 at 10:58

Using clientX and clientYshould solve your issue

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>

div follow cursor based on parent div not pageY

1 Answers1