실제로 스크롤하지 않고 스크롤 방향을 결정하는 방법

Question

처음으로 사용자가 스크롤 할 때 실제로 페이지를 스크롤하지 않고 전환이있는 클래스를 추가하는 페이지를 코딩하고 있습니다. 사용자가 아래로 스크롤하는 것을 감지하고 싶습니다. 위로 스크롤하면 다른 작업을 수행하기를 원합니다. 내가 발견 한 모든 메서드는 현재 본문 ScrollTop을 정의한 다음 페이지를 스크롤 한 후 방향을 정의하는 scrollTop 본문과 비교하지만 실제로 스크롤하지 않기 때문에 본문 scrollTop()은 변화는 없어.

animationIsDone = false; 

function preventScroll(e) { 

    e.preventDefault(); 
    e.stopPropagation(); 
} 

$('body').on('mousewheel', function(e) { 

    if (animationIsDone === false) { 
     $("#main-header").removeClass("yellow-overlay").addClass("yellow-overlay-darker"); 
     $(".site-info").first().addClass("is-description-visible"); 
     preventScroll(e); 

     setTimeout(function() { 
      animationIsDone = true; 
     }, 1000); 

    } 


}); 

이

내가 함께 온 것입니다, 그러나 방향을 중요하지 않습니다 그런 식으로 내가가 이벤트를 트리거 스크롤

Answer 1

mousewheel 이벤트가 빠르게 쓸모 없게되었습니다. 대신 wheel을 사용해야합니다.

이렇게하면 스크롤 막대가없는 가로 및/또는 세로 스크롤 방향으로 쉽게 이동할 수 있습니다.

이 이벤트는 현재 모든 주요 브라우저에서 지원되며 미래의 표준으로 남아 있어야합니다.

window.addEventListener('wheel', function(e) { 
 
    if (e.deltaY < 0) { 
 
    console.log('scrolling up'); 
 
    document.getElementById('status').innerHTML = 'scrolling up'; 
 
    } 
 
    if (e.deltaY > 0) { 
 
    console.log('scrolling down'); 
 
    document.getElementById('status').innerHTML = 'scrolling down'; 
 
    } 
 
});

<div id="status"></div>

Answer 2

e.wheelDelta

var animationIsDone = false, scrollDirection = 0; 

function preventScroll(e) { 

    e.preventDefault(); 
    e.stopPropagation(); 
} 

$('body').on('mousewheel', function(e) { 

    if (e.wheelDelta >= 0) { 
     console.log('Scroll up'); //your scroll data here 
    } 
    else { 
     console.log('Scroll down'); //your scroll data here 
    } 
    if (animationIsDone === false) { 
     $("#main-header").removeClass("yellow-overlay").addClass("yellow-overlay-darker"); 
     $(".site-info").first().addClass("is-description-visible"); 
     preventScroll(e); 

     setTimeout(function() { 
      animationIsDone = true; 
     }, 1000); 

    } 


}); 

주의를 사용해보십시오 : 그 마우스 휠 기억 FireFox에서 더 이상 사용되지 않으며 지원되지 않습니다.

Answer 3

시도해보십시오 addEventListener을 사용하십시오.

window.addEventListener('mousewheel', function(e){ 
    wDelta = e.wheelDelta < 0 ? 'down' : 'up'; 
    console.log(wDelta); 
}); 

Demo

업데이트 : 답변 중 하나에서 언급 한 바와 같이

의 마우스 휠 이벤트는 감가 상각된다. 대신 휠 이벤트를 사용해야합니다.