поймать содержание слайдов

Question

Я создаю игру с вращением колеса, используя reactJS. пока он работает правильно, но как я могу поймать тот контент слайда, где таймер останавливается чуть ниже указателя?

https://codesandbox.io/s/peaceful-framework-71qvd

Answer 1

Вы можете использовать Element.getBoundingClientRect() для стрелки и элемент <li>, чтобы проверить, находится ли стрелка над элементом.

Вот рабочий пример:

https://codesandbox.io/s/kind-smoke-jp1s6

функция, которая проверяет, перекрываются ли элементы:

areOverlapping = (rect1, rect2) => {
    return (
      rect2.top <= rect1.top &&
      rect1.top <= rect2.bottom &&
      (rect2.top <= rect1.bottom && rect1.bottom <= rect2.bottom) &&
      (rect2.left <= rect1.left && rect1.left <= rect2.right) &&
      (rect2.left <= rect1.right && rect1.right <= rect2.right)
    );
  };