Wie zu erkennen, scroll-Geschwindigkeit, mit Jquery?

Würde ich mag, um zu versuchen und zu replizieren io7 safari feature, wo die url und die navigation bars minimieren, wenn Sie einen Bildlauf langsam in javascript/jquery. Die erste Sache ist zu erkennen, scroll-Geschwindigkeit, die ich gesehen habe, diese Frage schon, aber ich mache dies in ein content-script, so das ich nicht unbedingt haben, das Obere und untere element, das Sie verwenden. Gibt es eine andere Möglichkeit zu erkennen, scroll-Geschwindigkeit?

InformationsquelleAutor EasilyBaffled | 2014-02-09
  1. 8

    Könnte man Anhängen, um das scroll-Ereignis über jQuery und verwenden Sie eine Kombination aus Zeitstempel und die scrollOffset, um zu bestimmen, scroll-Geschwindigkeit durch den Vergleich der Position/Zeit nach dem letzten scroll-Ereignis vor. So etwas wie dieses:

    var lastOffset = $( mySelector ).scrollTop();
var lastDate = new Date().getTime();

$( mySelector ).scroll(function(e) {
    var delayInMs = e.timeStamp - lastDate;
    var offset = e.target.scrollTop - lastOffset;
    var speedInpxPerMs = offset / delayInMs;
    console.log(speedInpxPerMs);

    lastDate = e.timeStamp;
    lastOffset = e.target.scrollTop;
});

    Sowieso, da Sie nicht über die Kontrolle über die navigation bar, die in einem regulären Browser sehe ich nicht den Punkt hier :/

    Werden können, Sie sind auf der Suche nach so etwas wie dieses: Parallaxe scroll mit einem sticky-header

    GL
    Chris

    • Ich bin versucht zu imitieren die Wirkung der nav-Leiste. Ich bin mit einem content-Skript in eine chrome-Erweiterung, um ein overlay erstellen, und wenn der Benutzer scrollt schnell will ich das overlay zu schrumpfen und sich aus dem Weg.
    • Auch das obige Skript wird Ihnen helfen, festzustellen, das 'schnell' Teil. Je nach scroll-offset könnte man verringern Sie die Größe des overlay-resp. definieren Sie einen Punkt, wo es zu verbergen. Was fehlt dir?
    • Nun, ich platzierte Fenster in der mySelector Ort und ich bin immer NaN für speedInpxPerMs. Ich habe nur eingeschränkten Zugriff auf die Seite, denn dies ist ein content-script, so dass vielleicht ein Teil des Problems.
    • Übergeben Sie das element, dass gescrollt wird z.B. 'Körper' oder '#myScrollContainer'.
    • Interessanterweise mit 'Körper' ich Körper.scrollTop veraltet ist, im strikten Modus. Bitte verwenden Sie 'documentElement.scrollTop", wenn im strikten Modus und 'Körper.scrollTop' nur, wenn Sie im quirks-Modus. Es ist vorgeschlagen, dann verwenden Sie 'html' statt, aber das stellt ein weiteres NaN. Ich habe versucht, Fenster und das gab mir ein anderes problem, also ich denke die einzige Lösung ist, um zu versuchen, und fügen Sie einige andere element und lassen für, die.
    • haben Sie versuchen, Dokument.documentElement?
    • e.timeStamp scheint immer 0...sowieso diese ganze code scheint falsch..
    • Ich meistens bekommen Infinity als Ergebnis.

    InformationsquelleAutor cschuff
  2. 1

    Habe ich versucht zu verwenden cschuffs beantworten, aber etwas war falsch. Mit diesem problem und die Freude, eine Klasse schreiben, ich habe nur den code in eine kleine Klasse, hier zu bekommen: https://github.com/SocialbitGmbH/JavascriptScrollSpeedMonitor

    Nutzung ist einfach:

    var scrollSpeedMonitor = new ScrollSpeedMonitor(function (speedInPxPerMs, timeStamp, newDirection)
{
    console.log('Scroll speed: ' + speedInPxPerMs);
});
    • Darüber hinaus gibt es eine StarScroller zu erkennen, wenn der Benutzer einen Bildlauf in Lichtgeschwindigkeit, so fügen Sie einige schöne "light-speed-Effekte" 🙂 github.com/SocialbitGmbH/JavascriptStarScroller
    • Ihnen fehlt eine schließende ) Halterung.
    • Vielen Dank, fügte hinzu, es! 🙂
    InformationsquelleAutor Thomas Kekeisen
Schreibe einen Kommentar