[ JavaScript ] 핀치 줌 구현하기!

기본 슬라이더 말고 모바일에서 상품을 크게 보기 위해서 큰 사이즈의 이미지 슬라이더를 구현했다. 그런데 핀치 줌으로 이미지를 확대, 축소를 하면 기존에 이미지를 넘기기 위해 구현한 Drag기능이 동작을 한다

그래서 터치를 했을 때 지금 몇 개의 손가락이 터치됐는지 확인하는 로직을 추가해 줬더니 내가 원하는 방식으로 잘 작동했다

const move = e => {
  if (isPinching.current) return;
};

const startTouch = e => {
  if (e.touches.length > 1) {
    isPinching.current = true;
    return;
  }
};

imageShow?.addEventListener('touchstart', startTouch);