Элемент после движения мыши и прокрутки - PullRequest
Новая
       16

Элемент после движения мыши и прокрутки

1 голос
/ 11 ноября 2019

Я пытаюсь написать немного Vanilla Javascript, чтобы элемент следовал моим движениям мыши. Я использовал clientX, clientY и событие mousemove, чтобы заставить его следовать, но когда я прокручиваю страницу, элемент не перемещается с помощью мыши. Я подумал, что, возможно, мне нужно использовать событие прокрутки, но я изо всех сил пытаюсь заставить его работать. Любая помощь будет отличной, спасибо! 

document.addEventListener('mousemove', (e) => {
    const mouseFollow = document.getElementById('mouse-follow');
    const x = e.clientX - 25; //-25 to center div over mouse
    const y = e.clientY - 25; 

    mouseFollow.style.top = `${y}px`;
    mouseFollow.style.left = `${x}px`;
})

Ответы [ 2 ]

1 голос
/ 11 ноября 2019

Добро пожаловать в SO @ psshaw20.

Я подозреваю, что вам не хватает того, что элемент должен иметь абсолютную позицию. Вот рабочее решение: 

document.addEventListener('mousemove', (e) => {

   const mouseFollow = document.getElementById('mouse-follow');
   const x = e.clientX - 25; //-25 to center div over mouse
   const y = e.clientY - 25; 
   console.log(x);
    
   mouseFollow.style.top = `${y}px`;
   mouseFollow.style.left = `${x}px`;
})
#mouse-follow{
  background: orange;
  position: absolute;
}
<span id=mouse-follow>*</span>
1 голос
/ 11 ноября 2019
  • Использование position: fixed;. clientX/Y относительно окна просмотра, как и позиция CSS fixed.
  • Кэшируйте ваш селектор, нет необходимости запрашивать DOM для элемента при каждом перемещении мыши 

const mouseFollow = document.getElementById('mouse-follow');

document.addEventListener('mousemove', (e) => {
  mouseFollow.style.cssText = `
    left: ${e.clientX - 25}px;
    top:  ${e.clientY - 25}px;
  `;
});
body {
  height: 200vh;
}

#mouse-follow {
  position: fixed;
  left: 0;
  top:0;
  padding: 25px;
  background: red;
}
<div id="mouse-follow"></div>
...