angular scrollstart and scrollstop don't fire in directive, scroll does

Question

I have a directive as below:

.directive('scrollPosition', function($window) {
  return {
    scope: {
      scroll: '=scrollPosition'
    },
    link: function(scope, element, attrs) {
      var windowEl = angular.element($window);

      var scrollhandler = function() {
        console.log("scrolling")
      }

      var starthandler = function() {
        console.log("scrolling start")
      }

      var stophandler = function() {
        console.log("scrolling end")
      }

      windowEl.on('scroll', scope.$apply.bind(scope, scrollhandler));
      windowEl.on('scrollstart', scope.$apply.bind(scope, starthandler));
      windowEl.on('scrollstop', scope.$apply.bind(scope, stophandler));
    }
  };
});

With HTML:

<div id="imageHolder" style="opacity: {{scroll}}" scroll-position="scroll">

The only event that fires is the 'scroll' event. I need the other two events and not this, as I am working on mobile and scroll events don't fire until the scrolling stops on mobile (see here http://andyshora.com/mobile-scroll-event-problems.html)

I need to do something custom on start and on end.

Any idea what I'm doing wrong?

Can you help me understand where you are seeing a "scrollstart" and "scrollstop" events? I've never heard of those. Are they jQuery events? — Antiga
– Antiga, Commented Sep 4, 2014 at 14:43
Yes, on the jqueryLite docs in angular it says 'on' is available. I'm not sure if these events are available though, I've looked around and found no info (hence I'm here). I'm assuming there must technically be a way in Angular to detect these. — Ben Taliadoros
– Ben Taliadoros, Commented Sep 4, 2014 at 14:46
This is literally the only thing I can find on a "scrollstart" event anywhere: api.jquerymobile.com/scrollstart This event is specifically in jQuery Mobile (an entirely different library). It doesn't seem to be included in jQuery (or, by extension, jqLite that's built in to angular). — Antiga
– Antiga, Commented Sep 4, 2014 at 14:50
Interesting, you're right, it is jquery mobile. They say on the docs "Note that iOS devices freeze DOM manipulation during scroll, queuing them to apply when the scroll finishes. We're currently investigating ways to allow DOM manipulations to apply before a scroll starts." so that wont work :( Is it impossible in 2014 to detect the start or end of a scroll? madness — Ben Taliadoros
– Ben Taliadoros, Commented Sep 4, 2014 at 14:54
That certainly is possible. Look into how debouncers work, e.g. the lodash/underscore debouncer. To catch the event start is trivial as its the first event fired. You can get the end event by saying if you don't catch an event within X ms, you consider the scroll to have finished. Finding a appropriate X value might depend on several factors. Ask this question on stackoverflow, and I / others can answer it for you. — bengro
– bengro, Commented Sep 5, 2014 at 22:06

Leo Farmer · Accepted Answer · 2014-12-01 03:43:31Z

1

If you want to use bengro's idea of using a timer to determine when the scroll has ended you could do something like this:

angular.module('App').directive('scroll',function(){
var timer = null;
return{
  scope:{
  },
  link: function (scope, element) {

 var stophandler = function() {
    console.log("scrolling end")
  }

   var starthandler = function() {
    console.log("scrolling start")
  }

    angular.element(element).bind('scroll', function () {

      scope.$apply.bind(scope, starthandler)

      clearTimeout(timer);

      timer = setTimeout(function () {
          scope.$apply.bind(scope, stophandler)
        }, 1500);

    });
  }
 };
});

answered Dec 1, 2014 at 3:43

Leo Farmer

7,9606 gold badges35 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ben Taliadoros Over a year ago

This doesnt seem to fire the start and stop events, you bind to the methods, but never call them....

Ben Taliadoros Over a year ago

I just realised it was me that asked this question!

Collectives™ on Stack Overflow

angular scrollstart and scrollstop don't fire in directive, scroll does

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related