jQuery를 사용하지 않고 JavaScript에서 스크롤 방향을 어떻게 결정할 수 있습니까?

jQuery 없이 스크롤 방향 결정

스크롤 방향 감지

jQuery를 사용하지 않고도 스크롤 이벤트의 방향을 결정할 수 있습니다. JavaScript 구현은 다음과 같습니다.

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

// Adjust the element selector based on the target of your scroll event.
document.querySelector('body').addEventListener("scroll", function() {
   var st = window.pageYOffset || document.documentElement.scrollTop;
   if (st > lastScrollTop) {
      // Downscroll code
   } else if (st < lastScrollTop) {
      // Upscroll code
   }
   lastScrollTop = st <= 0 ? 0 : st; // Account for negative scrolling or devices with touch events
}, false);</code>

이 코드에서는

• lastScrollTop이 이전 스크롤 위치를 저장합니다.
• 스크롤 이벤트 리스너는 다음에서 현재 스크롤 위치를 추적합니다. st.
• st와 lastScrollTop을 비교하여 스크롤 방향을 결정할 수 있습니다.
• 아래로 스크롤할 때 if 문이 실행되고, 위로 스크롤할 때 else if 문이 실행됩니다.
• lastScrollTop은 다음 스크롤 이벤트를 준비하기 위해 현재 스크롤 위치로 업데이트됩니다.

"Back to Top" 버튼 피하기

"Back to Top"을 추가하는 대신 버튼을 사용하면 스크롤 방향을 감지하여 보다 부드러운 접근 방식을 통합할 수 있습니다. 예를 들어 다음과 같이 할 수 있습니다.

• 아래로 스크롤하면 표시되고 위로 스크롤하면 숨겨지는 플로팅 탐색 모음을 표시합니다.
• CSS 애니메이션을 사용하여 페이지가 표시될 때 요소를 표시하거나 페이드합니다. 스크롤됩니다.
• 스크롤 방향에 따라 페이지 요소의 불투명도를 조정하여 시차 효과를 만듭니다.

위 내용은 jQuery를 사용하지 않고 JavaScript에서 스크롤 방향을 어떻게 결정할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!