jQuery 없이 JavaScript에서 스크롤 방향을 어떻게 결정할 수 있습니까?

jQuery 없이 스크롤 방향 감지

웹 개발에서 스크롤 방향 감지는 무한 스크롤이나 축소와 같은 기능을 구현하는 데 유용할 수 있습니다. 도구 모음. jQuery와 같은 라이브러리는 간단한 솔루션을 제공하지만 이를 사용하지 않고도 이를 달성할 수 있는 방법을 살펴보겠습니다.

스크롤 방향을 결정하기 위해 이전 스크롤 위치(scrollTop 또는 pageYOffset)를 추적하고 현재 스크롤과 비교할 수 있습니다. 위치. 이 차이는 위 또는 아래로 스크롤하는지 여부를 나타냅니다.

다음은 이 접근 방식을 보여주는 JavaScript 스니펫입니다.

<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(){ 
   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 중국어 웹사이트의 기타 관련 기사를 참조하세요!