Event when user stops scrolling

by

You can make the scroll() have a time-out that gets overwritten each times the user scrolls. That way, when he stops after a certain amount of milliseconds your script is run, but if he scrolls in the meantime the counter will start over again and the script will wait until he is done scrolling again.

Update:

Because this question got some action again I figured I might as well update it with a jQuery extension that adds a scrollEnd event

// extension:
$.fn.scrollEnd = function(callback, timeout) {          
  $(this).on('scroll', function(){
    var $this = $(this);
    if ($this.data('scrollTimeout')) {
      clearTimeout($this.data('scrollTimeout'));
    }
    $this.data('scrollTimeout', setTimeout(callback,timeout));
  });
};

// how to call it (with a 1000ms timeout):
$(window).scrollEnd(function(){
    alert('stopped scrolling');
}, 1000);
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

<div style="height: 200vh">
  Long div
</div>

More Related Contents:

  1. jQuery scroll() detect when user stops scrolling
  2. Disabling middle click scrolling with javascript
  3. How to check if element is visible after scrolling?
  4. jQuery.click() vs onClick
  5. Check if an image is loaded (no errors) with jQuery
  6. Check if a user has scrolled to the bottom (not just the window, but any element) [duplicate]
  7. Using jQuery to test if an input has focus
  8. How can I make a div stick to the top of the screen once it’s been scrolled to?
  9. jQuery load more data on scroll
  10. Prevent BODY from scrolling when a modal is opened
  11. Check if event exists on element [duplicate]
  12. How to detect online/offline event cross-browser?
  13. Scroll to an element with jQuery
  14. How to differentiate single click event and double click event?
  15. Detect multiple keys on single keypress event in jQuery
  16. How to bind Events on Ajax loaded Content?
  17. How to scroll the window using JQuery $.scrollTo() function
  18. Detect Close windows event by jQuery
  19. window.resize event firing in Internet Explorer
  20. javascript: detect scroll end
  21. jQuery change event on not firing in IE
  22. Detect if a page has a vertical scrollbar?
  23. How can I get jQuery .val() AFTER keypress event?
  24. jQuery event that triggers after CSS is loaded?
  25. Why is ‘event’ available globally in Chrome but not Firefox?
  26. Get the clicked object that triggered jquery blur() event [duplicate]
  27. Drop event not firing in chrome
  28. Moving a focus when the input text field reaches a max length
  29. jQuery load content when scroll to bottom-100px of page, multiple events fired
  30. Is My Page Being Loaded from the Browser Cache?

Leave a Comment