Angular JS not firing scroll event

Question

I've started building my first project with Angular 1.5.x. So far so good.

However, I've recently been trying to do something super simple and log the window position/event on scroll. I've tried various approaches such as directives, binding events, jquery and nothing appears to be getting logged in the console.

Typically in raw javascript I would do something simple such as:

window.onscroll = function (e) {
    console.log(e);
}

I've tried updating the code to look something like this in my controller:

angular.element($window).on('scroll', function (e) {
    console.log(e);
});

It does nothing. If I change the event to a click or resize it responds. But scrolling does nothing. It's been really frustrating.

I've tried using a directive and i've had the same result. Nothing.

Angular appears to remove the scroll event or override it in someway. I'm hoping there's an obvious solution or just another attribute or approach I need to do.

Many thanks for taking the time to look into my question.

I'd really appreciate any help and advice anybody can offer.

If i change the event to anything else such as 'click'. It works. It appears that 'scroll' doesn't respond at all. Really weird. — Liam Chapman
– Liam Chapman, Commented Nov 8, 2016 at 18:32
I tried your exact code and it worked fine for me. Are you injecting $window properly? — Dominic Aquilina
– Dominic Aquilina, Commented Nov 8, 2016 at 18:54
Let me know if my response below helped or not. Would like to improve it if needed. — zee
– zee, Commented Nov 8, 2016 at 20:09

zee · Accepted Answer · 2016-11-08 19:11:08Z

1

Take a look here http://plnkr.co/edit/FL06BgnmOpgVXNecB3mB?p=preview. Scroll through the HTML page and open up your console, you will see some output being printed. Notice in script.js that $window is a dependency injection.

app.directive("scroll", function ($window) {
  return function(scope, element, attrs) {
    angular.element($window).bind("scroll", function(e) {
      console.log(e);
      console.log(this.pageYOffset);
      scope.$apply();
    });
  };
});

edited Nov 8, 2016 at 19:11

answered Nov 8, 2016 at 19:04

zee

6662 gold badges7 silver badges31 bronze badges

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

3 Comments

Liam Chapman Over a year ago

Hi @zee, thanks for helping me out. I've tried your example on plunker and it works. However, when I transfer it to my app it doesn't trigger the scroll event. I can only think there's something conflicting in my code. But I'm not sure what. I find it bizarre that when i switch "scroll" to "click" it fires that event, but not scroll.

Liam Chapman Over a year ago

after more tinkering. I've finally got it to respond. I gave an element a hardcoded css height value of 5000px and it's now logging the event. So it would appear that angular is not getting the window height. I'm guessing it's something to do with using dynamic templates/routes and it's binding the scroll event before there is a page height? I wonder if this is a bug or typical with angular?

Liam Chapman Over a year ago

oh man, i'm so silly. I had my body tag with a height of 100% in my CSS. So i'm assuming my JS would think there is no need to scroll. Hopefully, this helps someone else if they get a similar issue. Thanks again @zee and everyone else who took the time to help.

egor.xyz · Accepted Answer · 2017-02-13 15:58:36Z

0

If you want to use in controller it's possible like this:

Plnkr example

app = angular.module('app', [])
  .controller('scrollCtrl', function($scope, $document, $window) {
  ctrl = this;
  ctrl.pos = 0;

  //Scroll function
  ctrl.onScroll = function() {
    $scope.$apply(function(){
      ctrl.pos = $window.scrollY;
    });
  }

  //Bind current this to function
  ctrl.onScroll = ctrl.onScroll.bind(ctrl);

  //Event
  $document.on('scroll', ctrl.onScroll);

  //Easy to unsubscribe from event:
  $scope.on('destroy', function() {
    $document.off('scroll', ctrl.onScroll);
  });
})

edited Feb 13, 2017 at 15:58

answered Feb 13, 2017 at 15:41

egor.xyz

3,2271 gold badge24 silver badges21 bronze badges

Collectives™ on Stack Overflow

Angular JS not firing scroll event

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related