jQuery: разница между значением $ (document).scrollLeft() и предыдущим значением $ (document).scrollLeft() в событии $ (document).scrolll(…)

#jquery #scroll

#jquery #прокрутка

Вопрос:

Я пытаюсь вычислить, как далеко пользователь прокрутил вправо / влево в событии $ (document).scroll (..).

 $(function() {

    $(document).scroll(function() {

        console.log($(document).scrollLeft());

        console.log('==========');

    });

});
  

Вы можете увидеть скрипку здесь:https://jsfiddle.net/5twd82bo /

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

Будем признательны за любую помощь!

Спасибо

Комментарии:

1. Скорее всего, документ не прокручивается, окно, тело или элемент прокручиваются

2. Вы имеете в виду это: jsfiddle.net/5twd82bo/1 ?

3. Спасибо @A. Вольф … ваше предложение указало мне правильное направление!

Ответ №1:

По сути, то, что вы ищете, — это событие остановки прокрутки.

Вы можете создать новое событие остановки прокрутки, применив функцию setTimeout к событию прокрутки.

 $(function() {
$.fn.scrollStopped = function(callback) {
  var that = this, $this = $(that);
  $this.scroll(function(ev) {
    clearTimeout($this.data('scrollTimeout'));
    $this.data('scrollTimeout', setTimeout(callback.bind(that), 250, ev));
  });
};
  
  var prevVal=0;
  
  $(document).scrollStopped(function() {
  
  	console.log(prevVal - $(document).scrollLeft());
    prevVal = $(document).scrollLeft();
  	//console.log($(document).scrollLeft());
    
    //console.log('==========');
  
  });
  
});  
 div {
  width:5000px;
}  
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
hello
</div>