Wie erkennt man die Scrollgeschwindigkeit mit Jquery?

Question

Ich möchte versuchen, und replizieren io7 Safari-Funktion, wo die URL und Navigationsleisten minimieren, wenn Sie langsam scrollen, in Javascript/jquery. Das erste Ding ist, Rollengeschwindigkeit zu ermitteln, ich habe this Frage bereits gesehen, aber ich tue dies in einem Inhaltsskript, also habe ich nicht notwendigerweise das obere und untere Element, das sie benutzen. Gibt es eine andere Möglichkeit, die Scroll-Geschwindigkeit zu erkennen?

Answer 1

Sie können das Scroll-Ereignis über jQuery anhängen und eine Kombination aus Zeitstempeln und scrollOffset verwenden, um die Scrollgeschwindigkeit zu bestimmen, indem Sie den Versatz/Zeitpunkt mit dem letzten Scroll-Ereignis vergleichen. Etwas wie folgt aus:

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

Anyways, da Sie die Kontrolle über Navigationsleiste nicht in einem regulären Browser habe ich den Punkt nicht hier sehen:/

Mai werden Sie für so etwas suchen: Parallax scroll with sticky header

GL Chris

Answer 2

ich versuchte cschuff s Antwort zu verwenden, aber etwas falsch war. Mit diesem Problem und die Freude, eine Klasse zu schreiben, habe ich einfach den Code in einer kleinen Klasse, erhalten sie hier: https://github.com/SocialbitGmbH/JavascriptScrollSpeedMonitor

Die Verwendung ist einfach:

var scrollSpeedMonitor = new ScrollSpeedMonitor(function (speedInPxPerMs, timeStamp, newDirection) 
{ 
    console.log('Scroll speed: ' + speedInPxPerMs); 
});