abrufbare Funktion zum prüfen ob Scroll Event aktiv ist oder gerade aktiv war.

[le0m]

Hallo zusammen,

ich benutze folgenden Script um herauszufinden, ob der User gerade scrollt oder nicht. Wenn er scrollt, wird window.notScrolling = false gesetzt und wenn er seit 500 ms nicht mehr gescrollt hat wird window.notScrolling wieder = true gesetzt.

window.notScrolling = true;
$( window ).scroll(function() {
    window.notScrolling = false;
    clearTimeout( $.data( this, 'scrollCheck' ) );
    $.data( this, 'scrollCheck', setTimeout(function() {
        window.notScrolling = true;
    }, 500) );
});

Momentan wird das Ergebnis (true/false) in der globalen var window.notScrolling abgespeichert. Ich hätte lieber eine function, die mir das Ergebnis im return zurückgibt und die ich von überall aus callen kann.
Aber ich weiß einfach nicht wie ich die function mit dem scroll listener zusammenbringen soll...

Der function call sollte dann ungefähr so aussehen:

if (notScrolling() === true){
    do stuff...
}

Ich denke Ihr wisst schon was ich meine..

 

[tsseh]

1) was hindert dich daran eine funktion zu schreiben, die notScrolling als return zurückliefert
2) solltest du die variable lokal legen
3) ist das mit hoher wahrscheinlichkeit der falsche ansatz, was willst du denn eigentlich damit bezwecken. richtig wäre vermutlich deinen code im onscroll auszuführen

fuction notScrolling()
{
  var notScrolling = true;
  var to = null;
  $( window ).scroll(function()
  {
    if (to)
    {
       clearTimeout(to);
    }
    notScrolling = false; // [B]false?[/B]
    to = setTimeout(function()
    {
        notScrolling = true;
    }, 500));
  });
  eturn notScrolling;
}

 

[le0m]

3) ist das mit hoher wahrscheinlichkeit der falsche ansatz, was willst du denn eigentlich damit bezwecken. richtig wäre vermutlich deinen code im onscroll auszuführen

myFunction() startet bei Resize:

$(window).resize(
    myFunction();
);

und soll nur ausgeführt werden, wenn der User nicht gerade scrollt oder wenn der User in den letzen 500ms nicht gescrollt hat.

Optimal fände ich es so:

$(window).resize(
    if (notScrolling() === true){
        myFunction();
    }
);

Vorher habe ich es sol gelöst:

window.notScrolling = true;
$( window ).scroll(function() {
    window.notScrolling = false;
    clearTimeout( $.data( this, 'scrollCheck' ) );
    $.data( this, 'scrollCheck', setTimeout(function() {
        window.notScrolling = true;
    }, 500) );
});

$(window).resize(
    if (window.notScrolling === true){
        myFunction();
    }
);

Das ging soweit. Ein einem Fall ist die Lösung aber buggy und ich denke das hat mit Asynchronität zu tun, bzw. dass in dem Fall die if Abfrage ausgeführt wurde, bevor die Sache mit dem Scroll Event durch war.. Wenn ich dafür eine function hätte könne ich versuchen das Problem mit Callbacks usw. einzudämmen.

1) was hindert dich daran eine funktion zu schreiben, die notScrolling als return zurückliefert

Wenn ich den Event Listener $( window ).scroll(function() in die function packe, dann greift er nicht mehr.

Ich hatte es so versucht:

     window.notScrolling = function() {
        var trigger = true;
        $( window ).scroll(function() {
            trigger = false;
            clearTimeout( $.data( this, 'scrollCheck' ) );
            $.data( this, 'scrollCheck', setTimeout(function() {
                trigger = true;
            }, 5000) );
        });
        return trigger;
    };
    
    $(window).resize(function() {
        if (window.notScrolling() === true){
            console.log('es wurde nicht gescrollt');
        } else if (window.notScrolling() === false){
            console.log('es wurde gescrollt');
        }
        console.log(window.notScrolling());
    });

ohne Erfolg. Das Scroll Event sollte ja schon überwacht werden, bevor der Resize und der damit verbundene notScrolling() function call eintritt. Der User hätte ja 500ms vor dem resize schon scrollen können, das wird dann aber nicht mehr von $( window ).scroll(function() { überwacht, wenn man die function erst nach dem Resize callt.


Deine Variante spuckt leider auch nur true aus. Wenn der User Scrollt sollte sie nach dem letzten registrierten Scroll Event 5000ms lang false ausspucken.

    function notScrolling()
    {
        var notScrolling = true;
        var to = null;
        $( window ).scroll(function()
        {
            if (to)
            {
                clearTimeout(to);
            }
            notScrolling = false; // false?
            to = setTimeout(function()
            {
                notScrolling = true;
            }, 5000);
        });
        return notScrolling;
    }

    $(window).resize(function() {
        console.log(notScrolling());
    });

 

[tsseh]

und soll nur ausgeführt werden, wenn der User nicht gerade scrollt

das ist immer gegeben

oder wenn der User in den letzen 500ms nicht gescrollt hat.

warum?

Das Scroll Event sollte ja schon überwacht werden, bevor der Resize und der damit verbundene notScrolling() function call eintritt.

dann könntest du die funktion einmal initial aufrufen, oder den scrollhandler nach außen verlagern

$(function()
{
    var notScrolling = true;

    fuction notScrolling()
    {
      return notScrolling;
    }

    var to = null;
    $( window ).scroll(function()
    {
      if (to)
      {
       clearTimeout(to);
      }
      notScrolling = false; // false?
      to = setTimeout(function()
      {
        notScrolling = true;
      }, 500));
    });
    

    $(window).resize(function()
    {
      if (notScrolling() === true)
      {
        myFunction();
      }
    });
});

 

[le0m]

warum?

Die meisten Mobile Browser lassen die Address Bar verschwinden und wieder auftauchen, wenn man runter und hoch scrollt. Das hat zur Folge, dass sich die Viewport Größe ständig verändert und die Resize Events "ungewollt" triggern. Häufig führt das auf Websites zu unnötigen Rucklern, Neu Skalierungen der Fullscreen Backgrounds usw.
Aus meiner Sicht wird das Übel stark reduziert, wenn man die Resize Funktionen einfriert, solange der Browser sein Hin-und-Her mit der Address Bar macht. z.B 500ms lang. Die Lösung ist natürtlich nicht das Goldene vom Ei, aber das beste was ich bis lang hervorbringen konnte... und im www konnte ich bis lang keine bessere Lösung finden.

$(function()
{
    var notScrolling = true;

    fuction notScrolling()
    {
      return notScrolling;
    }

    var to = null;
    $( window ).scroll(function()
    {
      if (to)
      {
       clearTimeout(to);
      }
      notScrolling = false; // false?
      to = setTimeout(function()
      {
        notScrolling = true;
      }, 500));
    });
    

    $(window).resize(function()
    {
      if (notScrolling() === true)
      {
        myFunction();
      }
    });
});

Das produziert einen Error:

Uncaught TypeError: notScrolling is not a function

Eine Idee?

 

[tsseh]

Das produziert einen Error:

die funktion und die variable heißen gleich, nenne eins von beiden mal anders

 

[le0m]

die funktion und die variable heißen gleich, nenne eins von beiden mal anders

Die Funktion funktioniert.
Leider fällt mir gerade auf, das das Problem damit nicht gelöst ist. Das ganze sieht schon etwas sauberer aus, aber ein Callback bzw. Deferred lässt sich damit auch nicht herstellen. Wenn ich ein Callback zur notScrolling() Funktion herstelle, könnte ich damit zwar sicher stellen, dass notScrolling() vor myFunction() aufgelöst wird, nur leider ist damit auch nicht sichergestellt, dass die Sache mit dem Scroll Event aufgelöst sein soll, bevor myFunction() startet.. :-/

Update:

Ich vermute gerade, dass der Bug gar nicht durch Asynchronität verursacht wird.. Es sieht mir mehr danach aus, als läge die Ursache darin, dass Chrome Mobile mit dem Scroll Event Probleme hat, bzw. komisch damit umgeht..
Ich habe also zusätzlich zu dem Scroll Event Listener noch ein 'touchmove' Event Listener hinzugefügt. Nun wird auch noch geprüft, ob ein Touchmove durchgeführt wurde, um den Resize in dem Fall auch noch zu blocken. Scheint soweit ganz gut zu funktionieren.
Hier das Ergebnis:

    var scrollingStatus = true;
    function notScrolling() {
        return scrollingStatus;
    }

    var to = null;
    $(window).scroll(function() {
        if (to) {
            clearTimeout(to);
        }
        scrollingStatus = false; // false?
        to = setTimeout(function() {
            scrollingStatus = true;
        }, 500);
    });

    $(window).on({ 'touchmove' : function(){
        if (to) {
            clearTimeout(to);
        }
        scrollingStatus = false; // false?
        to = setTimeout(function() {
            scrollingStatus = true;
        }, 500);
    } });

Vielen herzlichen Dank für deine Hilfe tsseh!