마우스나 터치패드를 사용할 때 스크롤 이벤트가 끝나는 즉시 화면의 스크롤을 중지

사용자가 마우스나 터치패드를 사용할 때 스크롤 이벤트가 끝나는 즉시 화면의 스크롤을 중지하려면, jQuery의 stop() 메서드를 활용해 스크롤 애니메이션을 즉시 중단하고, 스크롤 이벤트가 끝난 시점을 감지할 수 있습니다.

이를 위해 wheel 이벤트와 touchend 이벤트를 다룰 수 있습니다. 추가적으로, 스크롤 이벤트의 연속 여부를 확인하기 위해 setTimeout을 이용해 스크롤이 끝났는지 감지하는 방식을 적용할 수 있습니다.

아래는 스크롤 이벤트가 끝난 시점에 스크롤 애니메이션이 중지됩니다.

$(document).ready(function () {
  var scrollTimeout; // 스크롤이 끝났는지 확인하기 위한 타이머
  var isScrolling = false; // 사용자가 스크롤 중인지 여부

  // 스크롤 처리 함수
  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);
  }

  // 스크롤 이벤트 발생 시
  $(window).on("wheel", function (e) {
    // 스크롤 중임을 표시
    isScrolling = true;

    // 스크롤 처리
    handleScroll(e.originalEvent.deltaY);

    // 스크롤 타이머 재설정
    clearTimeout(scrollTimeout);
    scrollTimeout = setTimeout(function () {
      // 스크롤이 멈췄을 때 애니메이션을 중단
      $html.stop(true, true);
      isScrolling = false;
    }, 100); // 스크롤이 멈추고 100ms 후에 멈춘 것으로 간주
  });

  // 터치 이벤트 처리 (모바일 환경)
  function handleTouchStart(e) {
    startY = e.originalEvent.touches[0].clientY;
  }

  function handleTouchMove(e) {
    endY = e.originalEvent.touches[0].clientY;
  }

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

    // 스크롤이 끝났으므로 애니메이션 중지
    $html.stop(true, true);
    startY = endY = null;
  }

  $(window).on("touchstart", handleTouchStart);
  $(window).on("touchmove", handleTouchMove);
  $(window).on("touchend", handleTouchEnd);
});

스크롤 타이머: scrollTimeout 변수를 사용하여 스크롤이 끝났는지 감지합니다. wheel 이벤트가 발생할 때마다 타이머를 재설정하고, 마지막 스크롤 이벤트 이후 100ms 동안 추가 스크롤이 발생하지 않으면 애니메이션을 중지합니다.
애니메이션 중단: 스크롤이 끝나면 즉시 stop(true, true)로 현재 실행 중인 애니메이션을 중지합니다.
터치 이벤트 처리: 모바일 환경에서는 touchend 이벤트에서 애니메이션을 중단하여 터치 스크롤이 끝났을 때도 화면 스크롤이 즉시 멈추도록 합니다.

이렇게 하면 사용자가 스크롤을 멈췄을 때 화면이 더 이상 자동으로 스크롤되지 않고 즉시 멈추게 됩니다.

Leave a Comment 응답 취소