Detect if element has stopped momentum scrolling?

jquery check if scrolling stopped
momentum scrolling javascript
webkit-overflow-scrolling
webkit-overflow-scrolling chrome
detect scroll javascript
ios safari scrolling issue
ios overflow: scroll not working

Is it possibile to detect if an element has stopped scrolling in Mobile Safari via Javascript?

I have an element that has momentum scrolling by using -webkit-overflow-scrolling:touch, and I need to detect if the element has stopped scrolling, including after the momentum affects the scroll.

Is this possible? Using the onscroll event is not working as it should within my app.


You can calculate a swipe velocity and try to figure out if momentum scroll will occur based on some threshold value. I've done some testing and about 0.25 pixels/ms seems to be a good value.

Note: Sometimes momentum scrolling will occur for lower velocities too. The lowest velocity to cause momentum scrolling that I recorded was 0.13 (with very short delta time) so if you need a 100% perfect solution, keep on looking.

The example code also detects and deals with overscrolling.

Using JQuery;

var scrollWrapper = $('#myWrapper');
var starTime, startScroll, waitForScrollEvent;
scrollWrapper.bind('touchstart', function() {
   waitForScrollEvent = false;
});

scrollWrapper.bind('touchmove', function() { 
  startTime = new Date().getTime(); startScroll = scrollWrapper.scrollTop();
});

scrollWrapper.bind('touchend', function() {
  var deltaTime = new Date().getTime() - startTime;
  var deltaScroll = Math.abs(startScroll - scrollWrapper.scrollTop());
  if (deltaScroll/deltaTime>0.25 
        || scrollWrapper.scrollTop()<0 
        || scrollWrapper.scrollTop()>scrollWrapper.height()) {
    // will cause momentum scroll, wait for 'scroll' event
    waitForScrollEvent = true;
  }
  else {
    onScrollCompleted(); // assume no momentum scroll was initiated
  }
  startTime = 0;
});

scrollWrapper.bind('scroll', function() {
  if (waitForScrollEvent) {
    onScrollCompleted();
  }
});

Detecting when a visitor has stopped scrolling with vanilla , There's no native JavaScript event for when scrolling stops, but it is something you can detect pretty easily with just a few lines of code. Element.scrollHeight is a HTML element property which is set to the total height of the element. It includes visible and non-visible region (due to overflow hidden or scroll) of the element. Element.scrollHeight doesn’t include the border. Similarly check Element.scrollWidth. Element.offsetHeight is visible region height of the element.


In my case this worked perfectly:

var timer;
$(scrollWrapper).on('scroll',function(e){
    if(timer){
        clearTimeout(timer);
    }
    timer = setTimeout(function(){
       $(this).trigger('scrollFinished');
    }, 55)
})



 $(scrollWrapper).on('scrollFinished',function(){
         // will be called when momentum scroll is finished
   })

Publish 'scrollfinished' event when scroll has stopped.

.scroll(), The scroll event is sent to an element when the user scrolls to a different place in the element. It applies to window objects, but also to scrollable frames and  For one of my open source projects, I was recently asked if there’s a way to delay running something until after scrolling has finished. There’s no native JavaScript event for when scrolling stops, but it is something you can detect pretty easily with just a few lines of code. The Approach We want to listen for scroll events using addEventListener. We’ll set a delayed timeout function to


You could also add a function that recursivly calls itself until the scrolling has stopped within the element and then call futher function from there.

isScrolling() {
  var scrollStart = <element>.scrollTop;
  setTimeout(function() {
    var scrollPos = <element>.scrollTop;
    if (scrollStart !== scrollPos) {
      this.isScrolling()
    } else {
      // Scrolling has stopped
    }
  }, 100)
}

overscroll-behavior, You can use overscroll-behavior to get rid of unwanted scroll chaining Default scroll overflow behavior is observed inside the element this value is Both of these areas scroll; normally if you scrolled the chat window until This can be stopped using overscroll-behavior-y ( overscroll-behavior would also  -webkit-overflow-scrolling: touch is just for scrolling other elements on the page (only being able to scroll, say, a p). Also, touch scrolling gives no “scroll improvements” — it just lets you flick your finger to quickly get through something long.


scroll-behavior, The scroll-behavior CSS property sets the behavior for a scrolling box when scrolling When this property is specified on the root element, it applies to the viewport instead. Keyword values */ scroll-behavior: auto; scroll-behavior: smooth; /* Global If you'd like to contribute to the data, please check out  This feels like something that would not work properly if native momentum scroll kicks in. (I might be wrong. Haven’t tested it.) So if my “touchend” (end of scroll) occures below the magic 147px (or whatever your number is) but the momentum scrolls the window all the way to the top the “fix-search”-class will not be removed.


ftlabs/ftscroller: FTScroller is a cross-browser Javascript , FTScroller is a library for adding momentum scrolling to web content on devices with time (ms) that a fling can take to complete once the input has ended (​numeric, Automatically detect changes to the content of the scrollable element and  How to check if users stop scrolling a page with jQuery. 16/02/2014 Gabriele Romanato jQuery Short link The scroll event is a "continuous" event in the sense that this event fires multiple times when users scroll a web document.


locomotivemtl/locomotive-scroll: Detection of elements in , Detection of elements in viewport & smooth scrolling with parallax. GitHub is home to over 50 million developers working together to host and review code, manage projects, and build software together. Sign up Starts and stops at data-​scroll-target position. E.g. -100 if you want to scroll 100 pixels above your target​. There are two ways to know when an element gets visible / hidden in the screen during scrolling : Listening to the window scroll event. Observing the element for visibility using Intersection Observer API. Scroll events have performance issues — can cause page freezing and there may be a time lag.