Javascript: выполнить действие после прокрутки пользователя

Я пытаюсь найти способ сделать это. У меня есть список ящиков, каждый около 150px высокий. Я использую javascript (и jquery) и хочу, чтобы после того, как пользователь прокручивает страницу вниз, страница будет автоматически прокручиваться, чтобы поля соответствовали остальной части страницы (то есть, если пользователь прокручивает и y позиция страницы не делится на 150, она будет прокручиваться до ближайшей точки).

Теперь, на данный момент, я знаю, что могу активировать событие, используя событие .scroll() jquery, и я могу заставить его перейти к определенной точке с помощью .scrollTop(). Но каждый пиксель, который пользователь перемещает полосой прокрутки, активирует всю функцию. Так есть способ отсрочить функцию от стрельбы до тех пор, пока пользователь не прокрутит, и если они начнут прокручиваться снова, функция остановится?

Ответ 1

Как вы уже используете jQuery, посмотрите плагин Ben Alman doTimeout, который уже обрабатывает debouncing методов (это то, что вам нужно).

Пример бесстыдно украден с его сайта:

$(window).scroll(function(){
   $.doTimeout( 'scroll', 250, function(){
      // do something computationally expensive
   });
});

Ответ 2

Конечно, в обработчике событий для события прокрутки выключение setTimeout на 100 или 200 миллисекунд позже. Пусть эта функция setTimeout, установленная внутри обработчика событий прокрутки, делает логику позиционирования, указанную выше. Кроме того, обработчик события прокрутки очистит все тайм-ауты, установленные самим. Таким образом, при последнем запуске события прокрутки функция setTimeout будет завершена, так как событие прокрутки не очистило ее.

Ответ 3

Код:

var scrollTimeout = null;
var scrollendDelay = 500; // ms

$(window).scroll(function() {
    if ( scrollTimeout === null ) {
        scrollbeginHandler();
    } else {
        clearTimeout( scrollTimeout );
    }
    scrollTimeout = setTimeout( scrollendHandler, scrollendDelay );
});

function scrollbeginHandler() {
    // this code executes on "scrollbegin"
    document.body.style.backgroundColor = "yellow";
}

function scrollendHandler() {
    // this code executes on "scrollend"
    document.body.style.backgroundColor = "gray";
    scrollTimeout = null;
}

Ответ 4

Это в основном то же самое, что и ответ Шиме Видаса, но менее сложный:

var scrollTimeout = null;
$(window).scroll(function(){
    if (scrollTimeout) clearTimeout(scrollTimeout);
    scrollTimeout = setTimeout(function(){yourFunctionGoesHere()},500);
});

500 - это задержка. Должно быть хорошо для прокрутки мыши.

Ответ 5

Это будет сценарий, где ванильный JavaScript будет полезен.

var yourFunction = function(){
  // do something computationally expensive
}

$(window).scroll(function(){
  yfTime=setTimeout("yourFunction()",250);
});