jQuery scroll() detect when user stops scrolling

前端 未结 13 1433
情歌与酒
情歌与酒 2020-11-22 02:17

Ok with this..

$(window).scroll(function()
{
    $(\'.slides_layover\').removeClass(\'showing_layover\');
    $(\'#slides_effect\').show();
});
相关标签:
13条回答
  • 2020-11-22 02:53

    For those Who Still Need This Here Is The Solution

      $(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 */
          }
      });

    0 讨论(0)
  • 2020-11-22 02:56

    Rob W suggected I check out another post here on stack that was essentially a similar post to my original one. Which reading through that I found a link to a site:

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

    This actually ended up helping solve my problem very nicely after a little tweaking for my own needs, but over all helped get a lot of the guff out of the way and saved me about 4 hours of figuring it out on my own.

    Seeing as this post seems to have some merit, I figured I would come back and provide the code found originally on the link mentioned, just in case the author ever decided to go a different direction with the site and ended up taking down the link.

    (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) );
            }
        };
    
    })();
    
    0 讨论(0)
  • 2020-11-22 02:57

    This detects the scroll stop after 1 milisecond (or change it) using a global timer:

    var scrollTimer;
    
    $(window).on("scroll",function(){
        clearTimeout(scrollTimer);
        //Do  what you want whilst scrolling
        scrollTimer=setTimeout(function(){afterScroll()},1);
    })
    
    function afterScroll(){
        //I catched scroll stop.
    }
    
    0 讨论(0)
  • 2020-11-22 02:59

    I agreed with some of the comments above that listening for a timeout wasn't accurate enough as that will trigger when you stop moving the scroll bar for long enough instead of when you stop scrolling. I think a better solution is to listen for the user letting go of the mouse (mouseup) as soon as they start scrolling:

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

    and an example of it working can be seen in this JSFiddle

    0 讨论(0)
  • 2020-11-22 03:00

    Using jQuery throttle / debounce

    jQuery debounce is a nice one for problems like this. jsFidlle

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

    The second parameter is the "at_begin" flag. Here I've shown how to execute code both at "scroll start" and "scroll finish".

    Using Lodash

    As suggested by Barry P, jsFiddle, underscore or lodash also have a debounce, each with slightly different apis.

    $(window).scroll(_.debounce(function(){
        $('#scrollMsg').html('SCROLLING!');
    }, 150, { 'leading': true, 'trailing': false }));
    
    $(window).scroll(_.debounce(function(){
        $('#scrollMsg').html('STOPPED!');
    }, 150));
    
    0 讨论(0)
  • 2020-11-22 03:01

    Ok this is something that I've used before. Basically you look a hold a ref to the last scrollTop(). Once your timeout clears, you check the current scrollTop() and if they are the same, you are done scrolling.

    $(window).scroll((e) ->
      clearTimeout(scrollTimer)
      $('header').addClass('hidden')
    
      scrollTimer = setTimeout((() ->
        if $(this).scrollTop() is currentScrollTop
          $('header').removeClass('hidden') 
      ), animationDuration)
    
      currentScrollTop = $(this).scrollTop()
    )
    
    0 讨论(0)
提交回复
热议问题