Here is a directive I came up with to help with keeping track of page scroll position and when scrolling has started and stopped. I had a need for this in trying to hide page content while the user was scrolling up/down a page, and then re-showing the content once the scrolling had stopped. Currently this is only setup up to work at the document level, but and easy modification could be made to allow a new property to drive what scroll area is being monitored. I hope this helps others in case they need a way to tell if page scrolling has started or stopped.
HTML
Simply add the directive to the page or element you want to monitor scrolling on. Next add the scroll-callback function you want to be called from directive when scrolling starts and stops Next set the scroll-page to true for tracking document scrollbar, else can leave out for element scroll tracking
<div scroll-watcher scroll-callback="cntl.scrollStop($event, isEndEvent, isScrollingEvent)" scroll-page"true" >
Callback Function
Note: sample code is in ES6 format. This is an excerpt from a angular controller
//$event is the standard scroll event from the browser. This contains the X,Y information
//isEndEvent signals when scrolling has stopped
//isScrollingEvent signals when scrolling has started
scrollStop($event, isEndEvent, isScrollingEvent) {
if (isEndEvent) {
this.showBottomBar = true;
return;
}
if(isScrollingEvent)
{
this.showBottomBar = false;
return;
}
}