Event When User Stops Scrolling

Event when user stops scrolling

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>

Event AFTER scroll event stops?

You could use a timer to check if you have scrolled in the last N ms and call a callback after that about of time.

var wrapper = document.getElementById('wrapper')
function onScroll(element, scrolling, stopped) {  let timer = null  // bind the event to the provided element  element.addEventListener('scroll', function (e) {    // use a class to switch the box-shadow on    element.classList.add('scrolling')    if (typeof scrolling === 'function') {      scrolling.apply(this, arguments)    }    // clear the existing timer    clearTimeout(timer)    // set a timer for 100 ms    timer = setTimeout(() => {      // if we get in here the page has not been scrolled for 100ms      // remove the scrolling class      element.classList.remove('scrolling')      if (typeof scrolling === 'function') {        stopped.apply(this, arguments)      }    }, 100)  })}
// call the functiononScroll(wrapper,   function scrolling(e) {    e.target.classList.add('scrolling')  },  function stopped(e) {    e.target.classList.remove('scrolling')  })

* {  box-sizing: border-box;}
#wrapper {  height: 200px;  padding: 2em;  overflow: auto;  transition: .4s box-shadow;}
#wrapper.scrolling {   box-shadow: 0px 0px 60px blue inset;}
#topBar > div {  background: #eee;  height: 200px;  width: 200px;  margin-bottom: 1em;  position: relative;  transition: .4s all;}
#wrapper.scrolling #topBar > div {  transform: perspective(1200px) translateZ(20px);  box-shadow: 2px 2px 10px #777;}

<div id="wrapper" class="">  <div class="" id="topBar">    <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>  </div></div>

Capturing an event when user stops scrolling

Use a timeout:

var timer = null;

function done() {
  console.log('done scrolling');
}

window.addEventListener('scroll', function() {
    if (timer !== null) {
        clearTimeout(timer);        
    }

    timer = setTimeout(done, 150);
}, false);

DEMO: http://jsfiddle.net/fz79gmts/3/

jQuery scroll() detect when user stops scrolling

$(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?!)

How to detected when user's stop scrolling - Angular 5

To improve your current code, call clearTimeout when the scroll event is detected. It will prevent the div from showing up until you stop scrolling for the specified amount of time.

public scroll = false;
private timeout: number;

@HostListener('window:scroll', ['$event'])
onScroll(event) {
  this.scroll = true;
  clearTimeout(this.timeout);
  this.timeout = setTimeout(() => {
    this.scroll = false;
  }, 300);
}

See this stackblitz for a demo.

How do I check when the user has stopped scrolling?

In your component state, store the last time at which you've received a scroll event. In your render method, check when the last scroll event happened and decide whether your button should become visible again or not.

Rough example:

// Observe the scroll events.
<ScrollView onScroll={(e) => {
    this.setState({lastScroll: new Date()})
}} />

// Check if the last scroll happened later than 300ms ago.
if (this.state.lastScroll.getTime() < (new Date()).getTime() - 300) {
    // Render the button.
}

Reactjs Listen for scroll end events

I don't think there's any event to notify you that the scrolling stopped. In general, you need to wait for some time to elapse until the last scroll event. Typically you would use the debounce operation for that - many different utility libs implement it, e.g. lodash (https://lodash.com/docs/4.17.10#debounce):

window.addEventListener(
  "scroll",
  _.debounce(() => {
    console.log("scrolling stopped");
  }, 1000)
);

---

Related Topics