Как выполнять действие пока мышь находится над элементом?

Question

[Павел Андрейченко]

Доброго времени суток!

Подскажите пожалуйста как выполнять событие (в моем случае это +20 к скроллу элемента), при наведении мыши на другой элемент? Т.е. пока мышь наведена - плавно скроллим блок.

let row = document.getElementsByClassName('row')[0]

row.scrollBy({ 
  top: 0,
  left: 20,
  behavior: 'smooth' 
})

Answer 1

[Алексей Уколов]

Интерактивный пример

let isHovering = false;
let intervalId = null;

targetElement.addEventListener('mouseenter', () => {
  isHovering = true;

  intervalId = setInterval(() => {
    if (!isHovering) {
      clearInterval(intervalId);
      return;
    }

    row.scrollBy(/* params */);
  }, 16)
});

targetElement.addEventListener('mouseleave', () => {
  isHovering = false;

  if (intervalId) {
    clearInterval(intervalId);
  }
});

Можно обойтись и меньшим кодом:

let intervalId = null;

targetElement.addEventListener('mouseenter', () => {
  intervalId = setInterval(() => {
    row.scrollBy(/* params */);
  }, 16)
});

targetElement.addEventListener('mouseleave', () => clearInterval(intervalId));

Но этот вариант мне не очень нравится своей неявностью.

Answer 2

[Иван]

https://api.jquery.com/hover/
У нативного JS будет примерно тоже.

Answer 3

[Андрей Ч]

Используйте события mouseenter и mouseleave
https://developer.mozilla.org/en-US/docs/Web/Event...
https://developer.mozilla.org/en-US/docs/Web/Event...