AngularJS window scroll event does not fire

Question

I know there are some similar question concerning this problem, however I none of the solutions could help me.

I am using AngularJS and want to detect the scroll event. I tried plenty of versions on how to get the event, however at most it fires when first loaded then never again.

My last code I tried was the following:

$($window).on('scroll', alert('scrolled'));

But I also tried this:

Jquery .on('scroll') not firing the event while scrolling
or just the simple JQuery .scroll() event
window.onscroll = function(ev) ...

and many more, but nothing works.

Can anyone tell my what I am doing wrong?

Update: I tried the directive stuff, this works perfectly fine with safari BUT however not with chrome. Whats going on?

Update2: It works with the chrome mobile view when using the shift key. Are there any restrictions on chrome to apple trackpad? WTF?

I think it could depend on where you are using this code. In a controller, in the directive link, etc. Can you post some more code? — Red2678
– Red2678, Commented May 3, 2016 at 21:42
The dom is probably not ready at the point you're adding the event listener. Add it in a directive's link method and it should work. Please have a look at the answer to this SO question. — AWolf
– AWolf, Commented May 3, 2016 at 21:42

James Freund · Accepted Answer · 2016-05-03 21:41:26Z

8

I would just use

$(window).scroll(function () { alert('scrolled') })

OR you could use

angular.element($window).bind("scroll", function(e) {
    alert('scrolled')
})

answered May 3, 2016 at 21:41

James Freund

5834 silver badges13 bronze badges

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

3 Comments

James Freund Over a year ago

Angular has some built in jquery functionality using angular.element

threxx Over a year ago

okay that works with Safari, however NOT with chrome. Any idea why this is so & how so fix it?

James Freund Over a year ago

Try using a directive as shown in the jsfiddle. This will ensure your listener isn't created too late or too early.

Isaac Weingarten · Accepted Answer · 2019-02-14 20:53:59Z

3

there is no need for angular.element() inject $window to your controller, use the window.onscroll event

$window.onscroll = function (){ console.log('window was scrolled!'); };

edited Feb 14, 2019 at 20:53

answered Oct 23, 2018 at 20:18

Isaac Weingarten

1,21016 silver badges15 bronze badges

Collectives™ on Stack Overflow

AngularJS window scroll event does not fire

2 Answers 2

3 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Linked

Related