jQuery 없이 JavaScript를 사용하여 스크롤 방향을 어떻게 감지할 수 있나요?

스크롤 방향 감지

JavaScript의 스크롤 이벤트를 활용하면 jQuery 없이도 스크롤 방향을 판별할 수 있습니다.

스크롤 방향 감지

이를 수행하기 위해 이전 scrollTop 값을 저장하고 현재 scrollTop 값과 비교합니다.

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

// element should be replaced with the actual target element on which you have applied scroll, use window in case of no target element.
element.addEventListener("scroll", function () { // or window.addEventListener("scroll"....
  var st = window.pageYOffset || document.documentElement.scrollTop; // Credits: "https://github.com/qeremy/so/blob/master/so.dom.js#L426"
  if (st > lastScrollTop) {
    // downscroll code
  } else if (st < lastScrollTop) {
    // upscroll code
  } // else was horizontal scroll
  lastScrollTop = st <= 0 ? 0 : st; // For Mobile or negative scrolling
}, false);</code>

이를 사용하여 방법을 사용하면 타사 라이브러리에 의존하지 않고도 모든 웹페이지에서 스크롤 방향을 정확하게 감지할 수 있습니다.

위 내용은 jQuery 없이 JavaScript를 사용하여 스크롤 방향을 어떻게 감지할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!