jQuery scroll() detect when user stops scrolling

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

Ok with this..

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

    You could set an interval that runs every 500 ms or so, along the lines of the following:

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

    I haven't tested this code, but the principle should work.

    0 讨论(0)
  • 2020-11-22 02:40
    $(window).scroll(function() {
        clearTimeout($.data(this, 'scrollTimer'));
        $.data(this, 'scrollTimer', setTimeout(function() {
            // do something
            console.log("Haven't scrolled in 250ms!");
        }, 250));
    });
    

    Update

    I wrote an extension to enhance jQuery's default on-event-handler. It attaches an event handler function for one or more events to the selected elements and calls the handler function if the event was not triggered for a given interval. This is useful if you want to fire a callback only after a delay, like the resize event, or such.

    It is important to check the github-repo for updates!

    https://github.com/yckart/jquery.unevent.js

    ;(function ($) {
        var on = $.fn.on, timer;
        $.fn.on = function () {
            var args = Array.apply(null, arguments);
            var last = args[args.length - 1];
    
            if (isNaN(last) || (last === 1 && args.pop())) return on.apply(this, args);
    
            var delay = args.pop();
            var fn = args.pop();
    
            args.push(function () {
                var self = this, params = arguments;
                clearTimeout(timer);
                timer = setTimeout(function () {
                    fn.apply(self, params);
                }, delay);
            });
    
            return on.apply(this, args);
        };
    }(this.jQuery || this.Zepto));
    

    Use it like any other on or bind-event handler, except that you can pass an extra parameter as a last:

    $(window).on('scroll', function(e) {
        console.log(e.type + '-event was 250ms not triggered');
    }, 250);
    

    http://yckart.github.com/jquery.unevent.js/

    (this demo uses resize instead of scroll, but who cares?!)

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

    Here is how you can handle this:

        var scrollStop = function (callback) {
            if (!callback || typeof callback !== 'function') return;
            var isScrolling;
            window.addEventListener('scroll', function (event) {
                window.clearTimeout(isScrolling);
                isScrolling = setTimeout(function() {
                    callback();
                }, 66);
            }, false);
        };
        scrollStop(function () {
            console.log('Scrolling has stopped.');
        });
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    .<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>
    </body>
    </html>

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

    ES6 style with checking scrolling start also.

    function onScrollHandler(params: {
      onStart: () => void,
      onStop: () => void,
      timeout: number
    }) {
      const {onStart, onStop, timeout = 200} = params
      let timer = null
    
      return (event) => {
        if (timer) {
          clearTimeout(timer)
        } else {
          onStart && onStart(event)
        }
        timer = setTimeout(() => {
          timer = null
          onStop && onStop(event)
        }, timeout)
      }
    }
    

    Usage:

    yourScrollableElement.addEventListener('scroll', onScrollHandler({
      onStart: (event) => {
        console.log('Scrolling has started')
      },
      onStop: (event) => {
        console.log('Scrolling has stopped')
      },
      timeout: 123 // Remove to use default value
    }))
    
    0 讨论(0)
  • 2020-11-22 02:49

    please check the jquery mobile scrollstop event

    $(document).on("scrollstop",function(){
      alert("Stopped scrolling!");
    });
    
    0 讨论(0)
  • 2020-11-22 02:53
    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);
    

    very small Version with start and end ability

    0 讨论(0)
提交回复
热议问题