Cách xác định hướng cuộn mà không thực sự cuộn

Question

Tôi đang mã hóa trang nơi lần đầu tiên người dùng cuộn, nó không thực sự cuộn trang xuống, thay vào đó nó thêm một lớp có chuyển tiếp. Tôi muốn phát hiện khi người dùng cuộn xuống, bởi vì nếu anh ấy cuộn lên, tôi muốn nó làm điều gì đó khác. Tất cả các phương pháp mà tôi đã tìm được dựa trên việc xác định ScrollTop cơ thể hiện tại, và sau đó so sánh với cuộn cơ thểTop sau khi cuộn trang, xác định hướng, nhưng vì trang không thực sự cuộn, nên scrollTop() cơ thể không không thay đổi.

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); 

    } 


}); 

Đây là những gì tôi đã đi với, nhưng cách mà nó không quan trọng hướng tôi di chuyển nó kích hoạt sự kiện

Answer 1

Sự kiện mousewheel nhanh chóng trở nên lỗi thời. Thay vào đó, bạn nên sử dụng wheel.

Điều này cũng dễ dàng cho phép bạn cuộn theo chiều dọc và/hoặc chiều ngang mà không cần thanh cuộn.

Sự kiện này có hỗ trợ trong tất cả các trình duyệt chính hiện tại và phải giữ nguyên tiêu chuẩn trong tương lai.

Đây là một bản demo:

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

Hãy thử sử dụng 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); 

    } 


}); 

Lưu ý: nhớ mousewheel rằng không được dùng nữa và không được hỗ trợ trong FireFox

Answer 3

Hãy thử Điều này bằng cách sử dụng addEventListener.

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

Demo

Cập nhật:

Như đã đề cập trong một trong các câu trả lời, các mousewheel sự kiện khấu hao. Thay vào đó, bạn nên sử dụng sự kiện bánh xe.