È ansible utilizzare il metodo Window.Onscroll per includere il rilevamento della direzione di scorrimento?

È ansible utilizzare il metodo Window.Onscroll per includere il rilevamento della direzione di scorrimento?

Se si registra lo scrollX e lo scorrimentoY sulla pagina si carica e ogni volta che si verifica un evento di scorrimento, è ansible confrontare i valori precedenti con i nuovi valori per sapere quale direzione si scorre. Ecco una prova del concetto:

function scrollFunc(e) { if ( typeof scrollFunc.x == 'undefined' ) { scrollFunc.x=window.pageXOffset; scrollFunc.y=window.pageYOffset; } var diffX=scrollFunc.x-window.pageXOffset; var diffY=scrollFunc.y-window.pageYOffset; if( diffX<0 ) { // Scroll right } else if( diffX>0 ) { // Scroll left } else if( diffY<0 ) { // Scroll down } else if( diffY>0 ) { // Scroll up } else { // First scroll event } scrollFunc.x=window.pageXOffset; scrollFunc.y=window.pageYOffset; } window.onscroll=scrollFunc 

Con jquery, puoi anche registrare un evento di scorrimento personalizzato che fornisce la modifica dello scroll come argomento al gestore di eventi:

 var previous_scroll = $(window).scrollTop(); $(window).on('scroll', function() { var scroll = $(window).scrollTop(), scroll_change = scroll - previous_scroll; previous_scroll = scroll; $(window).trigger('custom_scroll', [scroll_change]); }); 

Quindi, invece di scroll , associare a custom_scroll :

 $(window).on('custom_scroll', function pos(e, scroll_change) { console.log(scroll_change); }); 

Ho avuto problemi a fare questo lavoro in ie8 (anche se è compatibile con ie9, FF e Chrome) – tutti gli scroll sembrano essere rilevati come orizzontali.

Ecco una demo script modificata che funziona anche in ie8 e potrebbe coprire alcuni browser in più.

 function scrollFunc(e) { function getMethod() { var x = 0, y = 0; if ( typeof( window.pageYOffset ) == 'number' ) { x = window.pageXOffset; y = window.pageYOffset; } else if( document.body && (document.body.scrollLeft || document.body.scrollTop ) ) { x = document.body.scrollLeft; y = document.body.scrollTop; } else if( document.documentElement && (document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) { x = document.documentElement.scrollLeft; y = document.documentElement.scrollTop; } return [x, y]; } var xy = getMethod(); var xMethod = xy[0]; var yMethod = xy[1]; if ( typeof scrollFunc.x == 'undefined' ) { scrollFunc.x = xMethod; scrollFunc.y = yMethod; } var diffX = scrollFunc.x - xMethod; var diffY = scrollFunc.y - yMethod; if( diffX<0 ) { // Scroll right } else if( diffX>0 ) { // Scroll left } else if( diffY<0 ) { // Scroll down } else if( diffY>0 ) { // Scroll up } else { // First scroll event } scrollFunc.x = xMethod; scrollFunc.y = yMethod; } window.onscroll=scrollFunc​