jQuery 없이 JavaScript에서 스크롤 방향을 감지하는 방법은 무엇입니까?

jQuery 없이 스크롤 방향 감지

스크롤 방향을 결정하는 것은 사용자 경험을 향상시키는 데 중요합니다. jQuery는 이 작업을 단순화하지만 바닐라 JavaScript를 사용하여 유사한 기능을 달성하는 것이 가능합니다.

문제 이해

제공된 코드는 현재 scrollTop을 비교하여 스크롤 방향을 감지하려고 시도합니다. 값을 0으로 설정합니다. 그러나 이 접근 방식은 스크롤이 항상 0부터 시작한다고 가정하기 때문에 결함이 있습니다. 실제로 스크롤 위치는 어떤 값이든 될 수 있습니다.

수동으로 스크롤 방향 감지

스크롤 방향을 감지하는 핵심은 이전 scrollTop 값을 저장하고 이를 현재 가치. 현재 값이 이전 값보다 크면 스크롤이 아래로 이동합니다. 반대로 현재 값이 이전 값보다 작으면 스크롤이 위로 이동합니다.

구현

다음 JavaScript 코드 조각은 스크롤 방향을 감지하는 방법을 보여줍니다.

<code class="javascript">var lastScrollTop = 0;

// Add event listener to the target element
element.addEventListener("scroll", function () {
  // Get the current scroll position
  var st = window.pageYOffset || document.documentElement.scrollTop;

  // Compare the current and previous scroll positions
  if (st > lastScrollTop) {
    // Downscroll code
  } else if (st < lastScrollTop) {
    // Upscroll code
  } else {
    // Horizontal scroll
  }

  // Update the lastScrollTop value
  lastScrollTop = st <= 0 ? 0 : st;
}, false);</code>

호환성 보장

이 코드는 대부분의 최신 브라우저에서 작동합니다. 그러나 이전 버전과의 호환성을 위해 window.pageYOffset 또는 document.documentElement.scrollTop 속성을 사용하여 스크롤 위치를 가져오는 것이 좋습니다. 또한, lastScrollTop 변수는 음수 스크롤이나 모바일 장치에서의 스크롤을 처리하기 위해 0으로 초기화되어야 합니다.

결론

이 문서에 설명된 접근 방식을 활용하면 다음을 수행할 수 있습니다. 바닐라 JavaScript를 사용하여 스크롤 방향을 효과적으로 감지합니다. 이 기술은 지연 로딩, 무한 스크롤, 부드러운 스크롤과 같은 기능을 구현하는 데 특히 유용합니다.

위 내용은 jQuery 없이 JavaScript에서 스크롤 방향을 감지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!