터치패드의 스크롤 이벤트가 발생할 때 scroll이나 wheel 이벤트를 사용해 스크롤 처리

터치패드의 스크롤 이벤트가 발생할 때 scroll이나 wheel 이벤트를 사용해 스크롤 처리를 하고 있습니다.

터치패드의 스크롤 동작이 끝난 후에도 계속 스크롤이 발생하는 문제는 animate() 함수가 비동기로 작동하기 때문에 생기는 문제일 수 있습니다. 이 문제를 해결하려면 animate() 함수 호출이 중첩되지 않도록 하거나 터치가 끝났을 때 모든 애니메이션을 중지하는 로직을 추가해야 합니다.

해결 방법으로 animate().stop() 메서드를 사용해 애니메이션이 중첩되지 않도록 하고, 터치패드 스크롤 동작이 끝나면 애니메이션이 즉시 중지되도록 할 수 있습니다. 다음과 같이 수정할 수 있습니다.

function handleScroll(deltaY) {
  // 애니메이션이 중첩되지 않도록 기존 애니메이션을 중지
  $html.stop(true, true);

  var windowHeight = $(window).height();
  var scrollTop = $(window).scrollTop();
  var scrollBottom = $(document).height() - windowHeight - scrollTop;
  var lastPage = $(".section").length; // 섹션의 개수를 기반으로 마지막 페이지 설정
  var lastPageTop = (lastPage - 1) * windowHeight;

  if (deltaY > 30 && page < lastPage && scrollTop <= scrollBottom) {
    page++;
  } else if (deltaY < 30 && page > 1 && scrollTop <= lastPageTop) {
    page--;
    $(".section-company").removeClass("small");
  } else {
    return;
  }

  var posTop = (page - 1) * windowHeight;
  $html.animate({ scrollTop: posTop }, 800);
}

function handleTouchEnd() {
  if (startY && endY) {
    var deltaY = startY - endY + 100;

    // 스크롤 애니메이션 중지
    $html.stop(true, true);

    handleScroll(deltaY);
  }

  startY = endY = null;
}

1. stop(true, true) 메서드를 추가하여 스크롤 애니메이션이 중복되지 않도록 하고, 이전에 실행된 애니메이션을 중지합니다.
2. 터치패드의 스크롤이 끝났을 때(handleTouchEnd) 스크롤 애니메이션이 즉시 중단되도록 stop(true, true)을 호출합니다.

이렇게 하면 터치패드 동작이 끝났을 때 웹 화면도 자연스럽게 멈추도록 조정됩니다.