использование дроссельной заслонки jQuery / debounce

jQuery debounce это хороший вариант для таких проблем, как эта. jsFidlle

$(window).scroll($.debounce( 250, true, function(){
    $('#scrollMsg').html('SCROLLING!');
}));
$(window).scroll($.debounce( 250, function(){
    $('#scrollMsg').html('DONE!');
}));

второй параметр-это флаг "at_begin". Здесь я показал, как выполнить код как в "scroll start", так и в "scroll finish".

Используя Лодашь

как предложил Барри П,jsFiddle,подчеркивание или лодашь также есть debounce, каждый с немного другие API.

$(window).scroll(_.debounce(function(){
    $('#scrollMsg').html('SCROLLING!');
}, 150, { 'leading': true, 'trailing': false }));

$(window).scroll(_.debounce(function(){
    $('#scrollMsg').html('STOPPED!');
}, 150));

Роб W предложил мне проверить еще один пост здесь на стеке, который был по существу похож на мой оригинальный пост. Прочитав который я нашел ссылку на сайт:

http://james.padolsey.com/javascript/special-scroll-events-for-jquery/

это на самом деле помогло решить мою проблему очень хорошо после небольшой настройки для моих собственных нужд, но в целом помогло получить много болтовни с дороги и спасло меня около 4 часов выяснения этого сам по себе.

видя, что этот пост, похоже, имеет некоторую заслугу, я решил, что вернусь и предоставлю код, найденный первоначально по упомянутой ссылке, на всякий случай, если автор когда-либо решил пойти в другом направлении с сайтом и в конечном итоге снял ссылку.

(function(){

    var special = jQuery.event.special,
        uid1 = 'D' + (+new Date()),
        uid2 = 'D' + (+new Date() + 1);

    special.scrollstart = {
        setup: function() {

            var timer,
                handler =  function(evt) {

                    var _self = this,
                        _args = arguments;

                    if (timer) {
                        clearTimeout(timer);
                    } else {
                        evt.type = 'scrollstart';
                        jQuery.event.handle.apply(_self, _args);
                    }

                    timer = setTimeout( function(){
                        timer = null;
                    }, special.scrollstop.latency);

                };

            jQuery(this).bind('scroll', handler).data(uid1, handler);

        },
        teardown: function(){
            jQuery(this).unbind( 'scroll', jQuery(this).data(uid1) );
        }
    };

    special.scrollstop = {
        latency: 300,
        setup: function() {

            var timer,
                    handler = function(evt) {

                    var _self = this,
                        _args = arguments;

                    if (timer) {
                        clearTimeout(timer);
                    }

                    timer = setTimeout( function(){

                        timer = null;
                        evt.type = 'scrollstop';
                        jQuery.event.handle.apply(_self, _args);

                    }, special.scrollstop.latency);

                };

            jQuery(this).bind('scroll', handler).data(uid2, handler);

        },
        teardown: function() {
            jQuery(this).unbind( 'scroll', jQuery(this).data(uid2) );
        }
    };

})();

я согласился с некоторыми комментариями выше, что прослушивание тайм-аута было недостаточно точным, поскольку это будет срабатывать, когда вы перестанете перемещать полосу прокрутки достаточно долго, а не когда вы прекратите прокрутку. Я думаю, что лучшее решение-слушать, как пользователь отпускает мышь (mouseup), как только они начинают прокрутку:

$(window).scroll(function(){
    $('#scrollMsg').html('SCROLLING!');
    var stopListener = $(window).mouseup(function(){ // listen to mouse up
        $('#scrollMsg').html('STOPPED SCROLLING!');
        stopListner(); // Stop listening to mouse up after heard for the first time 
    });
});

и пример его работы можно увидеть в это JSFiddle

вы можете установить интервал, который выполняется каждые 500 мс или около того, в следующем порядке:

var curOffset, oldOffset;
oldOffset = $(window).scrollTop();
var $el = $('.slides_layover'); // cache jquery ref
setInterval(function() {
  curOffset = $(window).scrollTop();
  if(curOffset != oldOffset) {
    // they're scrolling, remove your class here if it exists
    if($el.hasClass('showing_layover')) $el.removeClass('showing_layover');
  } else {
    // they've stopped, add the class if it doesn't exist
    if(!$el.hasClass('showing_layover')) $el.addClass('showing_layover');
  }
  oldOffset = curOffset;
}, 500);

Я не проверял этот код, но принцип должен работать.

function scrolled() {
    //do by scroll start
    $(this).off('scroll')[0].setTimeout(function(){
        //do by scroll end
        $(this).on('scroll',scrolled);
    }, 500)
}
$(window).on('scroll',scrolled);

очень маленькая версия с возможностью начала и конца

ок это то, что я использовал раньше. В основном вы смотрите удержание ссылки до последнего scrollTop(). Как только ваш тайм-аут очищается, вы проверяете текущий scrollTop() и если они одинаковы,вы сделали прокрутку.

$(window).scroll((e) ->
  clearTimeout(scrollTimer)
  $('header').addClass('hidden')

  scrollTimer = setTimeout((() ->
    if $(this).scrollTop() is currentScrollTop
      $('header').removeClass('hidden') 
  ), animationDuration)

  currentScrollTop = $(this).scrollTop()
)

пожалуйста, проверьте jQuery mobile scrollstop event

$(document).on("scrollstop",function(){
  alert("Stopped scrolling!");
});

для тех, кто все еще нуждается в этом вот решение

  $(function(){
      var t;
      document.addEventListener('scroll',function(e){
          clearTimeout(t);
          checkScroll();
      });
      
      function checkScroll(){
          t = setTimeout(function(){
             alert('Done Scrolling');
          },500); /* You can increase or reduse timer */
      }
  });

Это должно работать:

var Timer;
$('.Scroll_Table_Div').on("scroll",function() 
{
    // do somethings

    clearTimeout(Timer);
    Timer = setTimeout(function()
    {
        console.log('scrolling is stop');
    },50);
});