Erkennen Sie, ob der Benutzer einen Bildlauf durchführt

84

Wie kann ich in Javascript erkennen, ob der Benutzer einen Bildlauf durchführt?

user1365010
quelle
Nein, ich möchte von einer anderen Funktion schreiben if(scolling). Ist if(window.onscroll)das gleich
user1365010
Sie können scrollingin der einstellen onscroll. (ps: nein, das ist nicht dasselbe)
Rocket Hazmat
3
Der Benutzer "scrollt nie". Es gibt nur eine Bildlaufaktion, keinen Bildlaufstatus.
Kendall Frey
1
@ user1365010: D'OH! Daran habe ich nicht gedacht. Was genau versuchst du zu tun? Warum müssen Sie wissen, ob der Benutzer einen Bildlauf durchführt?
Rocket Hazmat
2
Interessant. Ich habe noch nie eine Schriftrolle neu gestartet. Möchtest du das näher erläutern?
Kendall Frey

Antworten:

85

das funktioniert:

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

bearbeiten:

Sie sagten, dies sei eine Funktion in einem TimeInterval.
Versuchen Sie es so:

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

Fügen Sie dann in Ihr Intervall Folgendes ein:

if(userHasScrolled)
{
//do your code here
userHasScrolled = false;
}
Wampie Driessen
quelle
Aber es ist eine Funktion in einem setInterval!
user1365010
4
@ user1365010: Was ist? Worüber redest du? Sie müssen der Frage weitere Details hinzufügen.
Rocket Hazmat
6
@ user1365010 Diese Antwort ist (im Kern) die beste, die Sie tun können.
Matt Ball
#FYI, es scheint nicht zu wachen, als der Container gescrollt hat, body.scroll () funktioniert, also habe ich beide hinzugefügt
Selva Ganapathi
12

Du hast gerade Javascript in deinen Tags gesagt, also könnte dir der Beitrag von @Wampie Driessen helfen.

Ich möchte auch einen Beitrag leisten, damit Sie bei Verwendung von jQuery Folgendes verwenden können, wenn Sie es benötigen.

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

Ein anderes Beispiel:

$(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
quelle
2
Soll jQuery nicht Browserunterschiede abstrahieren? Warum haben Sie Methoden für verschiedene Browser? Ist das $('#elem').bind('scroll'nicht gut genug EDIT: Egal, ich habe dein 2. Beispiel gesehen.
Rocket Hazmat
1
Mit ein wenig nativem Javascript ist ab und zu nichts falsch.
AGDM
Meinst du nicht e.originalEvent.wheelDelta || e.originalEvent.detail?
Jacob RossDev
2
WARNUNG: Die Radereignisse in dieser Antwort sind nicht standardisiert und veraltet. Verwenden Sie das wheelEreignis.
Alexander O'Mara
Ich habe dies nicht getestet, aber laut MDN wird DOMMouseScroll in den meisten Browsern nicht unterstützt. Developer.mozilla.org/en-US/docs/Web/Events/DOMMouseScroll
Liron Yahdav
5
window.addEventListener("scroll",function(){
    window.lastScrollTime = new Date().getTime()
});
function is_scrolling() {
    return window.lastScrollTime && new Date().getTime() < window.lastScrollTime + 500
}

Ändern Sie die 500 in die Anzahl der Millisekunden nach dem letzten Bildlaufereignis, bei dem Sie den Benutzer als "nicht mehr scrollend" betrachten.

( addEventListenerist besser als onScrollweil der erstere gut mit jedem anderen Code koexistieren kann, der verwendet onScroll.)

Silas S. Brown
quelle
0

Verwenden Sie zur Überprüfung ein Intervall

Sie können ein Intervall einrichten, um zu überprüfen, ob der Benutzer gescrollt hat, und dann etwas entsprechend zu tun.

Aus dem großen John Resig in seinem Artikel entlehnt .

Beispiel:

    let didScroll = false;

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

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

Siehe Live-Beispiel

hitautodestruct
quelle