jQuery上下滚动无法在移动设备上使用

Question

I am using jQuery to detect when a user scrolls the mousewheel down or up. here is my code:

$(window).bind('mousewheel DOMMouseScroll', function(event){
    if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {
        // scroll up
    }
    else {
        // scroll down
    }
});

I just realized this doesn't work with mobile swiping up or down. Is there a way I can modify the code so that it works on mobile too?

Answer 1

You can actually this using jQuery scroll function and compare the last scroll position to the current scroll position if it's lesser the user is scrolling down otherwise up

 var last_pos= 0; $(window).scroll(function () { var current_pos= $(this).scrollTop(); if (current_pos > last_pos) { alert('down'); } else { alert('up'); } last_pos = current_pos; }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <h1>test</h1><h1>test</h1><h1>test</h1><h1>test</h1><h1>test</h1><h1>test</h1><h1>test</h1><h1>test</h1><h1>test</h1> 

Answer 2

For mobile you have scrollstart and scrollstop, you don't have up or down so you have to do it yourself :P

Check this: jQuery Mobile: Make the header hide on scroll down and show on scroll up

You have a snippet there you can easily edit for what you need!