AngularJS and getting window scroll position in controller

Question

I'm having some trouble understanding how to get the scroll position of window within my controller, so I can build logic around it.

From all the questions and answers I've been reading the most accepted answer seems to be to write a directive that calculates the scroll position, stick that directive on an element, and that's it.

However, when you want to do something along the lines of:

if (scrollY > 100 ){
  $scope.showMenu = true;
}

if (scrollY > 500) {
  $scope.showFooter = true;
}

This approach doesn't seem to work, because the calculated position in the directive can't be accessed from the controller. What would be the right 'Angular' way of doing this, which would still allow slightly more complicated logic to be executed from the controller?

Bind the controller's scope variable to the directive's isolated scope and implement the logic in the directive's controller. — Angad
– Angad, Commented Oct 14, 2014 at 16:14
@Angad, Linial, would it be possible to illustrate this with an example? Please? :) — Squrler
– Squrler, Commented Oct 15, 2014 at 8:09
This may help: stackoverflow.com/questions/20253322/angular-js-scroll-window — chovy
– chovy, Commented Nov 5, 2014 at 5:29

Zachary Dahan · Accepted Answer · 2016-03-13 20:19:06Z

13

According to @RobKohr comment, here's a optimized approach using .on('scroll') and $scope.$apply to update a scope element on scroll.

$document.on('scroll', function() {
    // do your things like logging the Y-axis
    console.log($window.scrollY);

    // or pass this to the scope
    $scope.$apply(function() {
        $scope.pixelsScrolled = $window.scrollY;
    })
});

answered Mar 13, 2016 at 20:19

Zachary Dahan

1,50816 silver badges26 bronze badges

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

2 Comments

Simon Robb Over a year ago

You'll receive more granularity on the scroll position because it's responding to the native scroll event, but you're going to be thrashing the angular scope by $applying that every time the handler fires. This is definitely not optimized. Instead refer to my comment in response to RobKhor: requestAnimationFrame is the way to go. Avoid touching the scope at all costs!

Zachary Dahan Over a year ago

As far as I remember, I was needed $scope.pixelsScrolled in many places of my website and this allowed me to make it maintainable and I kept good performances for what I've asked.

Simon Robb · Accepted Answer · 2015-03-13 21:27:20Z

7

Inject the $window service into your controller, which is simply a wrapper around the browser window object, and you have the $window.scrollX and $window.scrollY properties.

If you want to respond to changes in scroll, put a watch on them:

$scope.$watch(function () {
    return $window.scrollY;
}, function (scrollY) {
    /* logic */
});

answered Mar 13, 2015 at 21:27

Simon Robb

1,6981 gold badge14 silver badges25 bronze badges

3 Comments

RobKohr Over a year ago

Worked for me. A little slow though. It doesn't seem to update frequently

Simon Robb Over a year ago

@RobKohr Agreed. The question hints at setting a scope variable when the scroll position changes, so a $scope.$watch made the most sense, but I should have also mentioned that requestAnimationFrame should be used for paint operations like this. In that case, any changes to scope variables should be wrapped inside a $scope.$apply function, or they won't be picked up by Angular - a small inconvenience for the increased efficiency of requestAnimationFrame.

user3871 Over a year ago

@SimonRobb When I compare $window.scrollY to my angular.element(...).prop('offsetTop'), they are vastly out of alignment. When I scroll on the page down to the element, $window.scrollY shows 1552 and prop('offsetTop') shows 2013 even though I've arrived at that element. How do I get these to align?

georgeawg · Accepted Answer · 2019-06-23 18:15:31Z

The accepted answer lacks teardown code:

ERRONEOUS (lacks teardown)

$document.on('scroll', function() {
    // do your things like logging the Y-axis
    console.log($window.scrollY);

   // or pass this to the scope
    $scope.$apply(function() {
        $scope.pixelsScrolled = $window.scrollY;
    })
});

To avoid memory leaks and other undesired behavior, the code needs to do proper teardown when the $scope is destroyed.

$document.on('scroll', scrollHandler);

$scope.$on("$destroy", function() {
    $document.off('scroll', scrollHandler);
});

function scrollHandler(ev) {
    // do your things like logging the Y-axis
    console.log($window.scrollY);

    // or pass this to the scope
    $scope.$apply(function() {
        $scope.pixelsScrolled = $window.scrollY;
    });
}

Collectives™ on Stack Overflow

AngularJS and getting window scroll position in controller

3 Answers 3

2 Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related