He encontrado algunas maneras excelentes de verificar dónde está la barra de desplazamiento usando jquery, pero me preguntaba si puede diferenciar si el usuario se desplazó hacia arriba o hacia abajo.
Compruebe el último estado. Algo como esto:
Mantenga una variable, digamos, last_scroll_position , y cuando tenga un desplazamiento, si last_scroll_position - current_position > 0 , el usuario se desplazó hacia arriba y hacia abajo si es menor que 0.
<script type='text/javascript'> $(function(){ var CurrentScroll = 0; $(window).scroll(function(event){ var NextScroll = $(this).scrollTop(); if (NextScroll > CurrentScroll){ //write the codes related to down-ward scrolling here } else { //write the codes related to upward-scrolling here } CurrentScroll = NextScroll; //Updates current scroll position }); });Para diferenciar entre desplazarse hacia arriba/abajo en jQuery, puede usar:
var mousewheelevt = (/Firefox/i.test(navigator.userAgent)) ? "DOMMouseScroll" : "mousewheel" //FF doesn't recognize mousewheel as of FF3.x $('#yourDiv').bind(mousewheelevt, function(e){ var evt = window.event || e //equalize event object evt = evt.originalEvent ? evt.originalEvent : evt; //convert to originalEvent if possible var delta = evt.detail ? evt.detail*(-40) : evt.wheelDelta //check for detail first, because it is used by Opera and FF if(delta > 0) { //scroll up } else{ //scroll down } }); Este método también funciona en divs que tienen overflow:hidden .
Lo probé con éxito en FireFox, IE y Chrome.