88

Come posso rilevare in javascript se l'utente sta scorrendo?

javascript

— user1365010
fonte

No, voglio scrivere da un'altra funzione if(scolling). È if(window.onscroll)lo stesso?

— user1365010

Puoi impostare scrollingin onscroll. (ps: no, non è la stessa cosa)

— Rocket Hazmat

3

L'utente non "sta mai scorrendo". C'è solo un'azione di scorrimento, non uno stato di scorrimento.

— Kendall Frey

1

@ user1365010: D'OH! Non ci ho pensato. Cosa stai cercando di fare esattamente? Perché hai bisogno di sapere se l'utente sta scorrendo?

— Rocket Hazmat

2

Interessante. Non ho mai 'riavviato' una pergamena. Ti va di elaborare?

— Kendall Frey

88

questo funziona:

window.onscroll = function (e) {  
// called when the window is scrolled.  
}

modificare:

hai detto che questa è una funzione in un TimeInterval ..
Prova a farlo in questo modo:

userHasScrolled = false;
window.onscroll = function (e)
{
    userHasScrolled = true;
}

quindi all'interno del tuo Intervallo inserisci questo:

if(userHasScrolled)
{
//do your code here
userHasScrolled = false;
}

— Wampie Driessen
fonte

Ma è una funzione in un setInterval!

— user1365010

4

@ user1365010: Cos'è? Di cosa stai parlando? Devi aggiungere più dettagli alla domanda.

— Rocket Hazmat

6

@ user1365010 questa risposta è (fondamentalmente) la migliore che puoi fare.

— Matt Ball

# FYI, non sembra funzionare quando il container stava scorrendo, body.scroll () funziona, quindi ho aggiunto entrambi,

— Selva Ganapathi

11

Hai appena detto javascript nei tuoi tag, quindi il post di @Wampie Driessen potrebbe aiutarti.

Voglio anche contribuire, quindi puoi usare quanto segue quando usi jQuery se ne hai bisogno.

 //Firefox
 $('#elem').bind('DOMMouseScroll', function(e){
     if(e.detail > 0) {
         //scroll down
         console.log('Down');
     }else {
         //scroll up
         console.log('Up');
     }

     //prevent page fom scrolling
     return false;
 });

 //IE, Opera, Safari
 $('#elem').bind('mousewheel', function(e){
     if(e.wheelDelta< 0) {
         //scroll down
         console.log('Down');
     }else {
         //scroll up
         console.log('Up');
     }

     //prevent page fom scrolling
     return false;
 });

Un altro esempio:

$(function(){
    var _top = $(window).scrollTop();
    var _direction;
    $(window).scroll(function(){
        var _cur_top = $(window).scrollTop();
        if(_top < _cur_top)
        {
            _direction = 'down';
        }
        else
        {
            _direction = 'up';
        }
        _top = _cur_top;
        console.log(_direction);
    });
});

— Oscar Jara
fonte

2

JQuery non dovrebbe astrarre le differenze del browser? Perché disponi di metodi per browser diversi? Non $('#elem').bind('scroll'è abbastanza buono? EDIT: Non importa, ho visto il tuo secondo esempio.

— Rocket Hazmat

1

non c'è niente di sbagliato in un po 'di javascript nativo ogni tanto.

— AGDM

Non intendi e.originalEvent.wheelDelta || e.originalEvent.detail?

— JacobRossDev

2

ATTENZIONE: gli eventi ruota in questa risposta non sono standard e sono deprecati. Usa l' wheelevento.

— Alexander O'Mara

Non l'ho testato ma secondo MDN DOMMouseScroll non è supportato nella maggior parte dei browser developer.mozilla.org/en-US/docs/Web/Events/DOMMouseScroll

— Liron Yahdav

6

window.addEventListener("scroll",function(){
    window.lastScrollTime = new Date().getTime()
});
function is_scrolling() {
    return window.lastScrollTime && new Date().getTime() < window.lastScrollTime + 500
}

Modificare il 500 al numero di millisecondi dopo l'ultimo evento di scorrimento in cui si considera che l'utente "non sta più scorrendo".

( addEventListenerè meglio che onScrollperché il primo può coesistere bene con qualsiasi altro codice che utilizza onScroll.)

— Silas S. Brown
fonte

0

Usa un intervallo per controllare

Puoi impostare un intervallo per continuare a controllare se l'utente ha fatto scorrere, quindi fare qualcosa di conseguenza.

Prendendo in prestito dal grande John Resig nel suo articolo .

Esempio:

    let didScroll = false;

    window.onscroll = () => didScroll = true;

    setInterval(() => {
        if ( didScroll ) {
            didScroll = false;
            console.log('Someone scrolled me!')
        }
    }, 250);

Vedi esempio dal vivo

— hitautodestruct
fonte

Rileva se l'utente sta scorrendo

Usa un intervallo per controllare