Wykryj, czy użytkownik przewija

86

Jak mogę wykryć w javascript, czy użytkownik przewija?

user1365010
źródło
Nie, chcę pisać z innej funkcji if(scolling). Jest if(window.onscroll)taki sam?
user1365010
Możesz ustawić scrollingw onscroll. (ps: nie, to nie to samo)
Rocket Hazmat
3
Użytkownik nigdy nie „przewija”. Występuje tylko akcja przewijania, a nie stan przewijania.
Kendall Frey
1
@ user1365010: D'OH! Nie pomyślałem o tym. Co dokładnie próbujesz zrobić? Dlaczego musisz wiedzieć, czy użytkownik przewija?
Rocket Hazmat
2
Ciekawy. Nigdy nie „restartowałem” zwoju. Możesz rozwinąć temat?
Kendall Frey

Odpowiedzi:

87

to działa:

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

edytować:

powiedziałeś, że to funkcja w przedziale czasu.
Spróbuj zrobić to tak:

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

następnie w swoim Interval wstaw to:

if(userHasScrolled)
{
//do your code here
userHasScrolled = false;
}
Wampie Driessen
źródło
Ale to funkcja w setInterval!
user1365010
4
@ user1365010: co to jest? O czym mówisz? Musisz dodać więcej szczegółów do pytania.
Rocket Hazmat
6
@ user1365010 ta odpowiedź jest (w gruncie rzeczy) najlepsze, co możesz zrobić.
Matt Ball
#FYI, wygląda na to, że nie budzi się podczas przewijania kontenera, działa body.scroll (), więc dodałem oba,
Selva Ganapathi
12

Właśnie powiedziałeś javascript w swoich tagach, więc post @Wampie Driessen może ci pomóc.

Chcę również wnieść swój wkład, więc jeśli potrzebujesz, możesz użyć następujących elementów podczas korzystania z jQuery.

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

Inny przykład:

$(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
źródło
2
Czy jQuery nie ma usuwać różnic między przeglądarkami? Dlaczego macie metody dla różnych przeglądarek? Czy $('#elem').bind('scroll'nie wystarczająco dobry? EDYCJA: Nieważne, widziałem twój drugi przykład.
Rocket Hazmat
1
nie ma nic złego w małym natywnym javascript od czasu do czasu.
AGDM,
Nie masz na myśli e.originalEvent.wheelDelta || e.originalEvent.detail?
JacobRossDev
2
OSTRZEŻENIE: zdarzenia koła w tej odpowiedzi są niestandardowe i przestarzałe. Skorzystaj z wheelwydarzenia.
Alexander O'Mara
Nie testowałem tego, ale według MDN DOMMouseScroll nie jest obsługiwany w większości przeglądarek 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
}

Zmień wartość 500 na liczbę milisekund po ostatnim zdarzeniu przewijania, przy której użytkownik „przestał przewijać”.

( addEventListenerjest lepsze niż to, onScrollże ten pierwszy może ładnie współistnieć z każdym innym kodem, który używa onScroll).

Silas S. Brown
źródło
0

Użyj interwału, aby sprawdzić

Możesz ustawić interwał, aby sprawdzać, czy użytkownik przewinął, a następnie zrób coś odpowiednio.

Pożyczenie od wielkiego Johna Resiga w swoim artykule .

Przykład:

    let didScroll = false;

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

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

Zobacz przykład na żywo

hitautodestruct
źródło