Как определить скорость прокрутки с помощью JQuery?

Question

Я хотел бы попробовать и повторить функцию сафари io7, где строки url и навигации минимизируются при медленном прокрутке в javascript/jquery. Прежде всего, чтобы обнаружить скорость прокрутки, я уже видел вопрос this, но я делаю это в сценарии содержимого, поэтому я не обязательно использую верхний и нижний элементы. Есть ли другой способ определения скорости прокрутки?

Answer 1

Вы можете прикрепить к событию прокрутки через jQuery и использовать комбинацию временных меток и scrollOffset для определения скорости прокрутки путем сравнения времени смещения/времени с последним событием прокрутки. Что-то вроде этого:

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

В любом случае, так как вы не имеете контроля над навигационной панелью в регулярных браузерах я не вижу смысл здесь:/

Может быть вы ищете что-то вроде этого: Parallax scroll with sticky header

GL Chris

Answer 2

Я пытался использовать cschuff сек ответ, но что-то не так. С этой проблемой и радость, чтобы написать класс, я просто поставить код в небольшой класс, получить его здесь: https://github.com/SocialbitGmbH/JavascriptScrollSpeedMonitor

Способ применения прост:

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