Angular change var on scroll

Question

I have a var in my $scope, and i need to decrease it, when scroll up and increase, when scroll down. How can I do that? Should I use js scroll? Is there any ways to not to reinvent the wheel?­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­

Answer 1

Your question is not clear, but if I understand it correctly you want to increase/decrease the counter based on the scroll direction.

The way you can to it is by tapping into the 'scroll'(jQuery) event like:

angular.element($window).on('scroll', function(event) {
    // Do something here.
});

Better you can write a custom directive that would to this and emit the custom event and then you can listen for this event in your controller and act upon it.

Note: You can also debounce the scroll event.

P.S. : Please always do provide the code snippet or jsfiddle/codepen, so that others can better understand your question.

angular.module('app', [])
  .controller('MainController', function($rootScope, $scope) {
    var changeBy = 5;
    $scope.scrollCounter = 0;

    // Tap into custom 'scrollHappened' event.
    $rootScope.$on('scrollHappened', function(event, scrollUpHappened) {

      // If the scroll direction is 'down'.
      if (scrollUpHappened) {
        $scope.scrollCounter += changeBy;
      } else { // Scroll direction is 'up'.
        $scope.scrollCounter -= changeBy;
      }
    });
  })
  .directive('scrollCounter', function($rootScope, $window) {
    return {
      restrict: 'A',
      link: function() {
        var lastScrollPos = 0;

        // Add a scroll event on $window object.
        angular.element($window).on('scroll', function(event) {
        console.log(angular.element(event.target))
          var scrollPos = angular.element(event.target).scrollTop();

          // Emit custom 'scrollHappened' event.
          $rootScope.$emit('scrollHappened', (scrollPos > lastScrollPos));

          // As all this is happening outside of the angular world
          // wrap the update logic inside $apply, so that update will
          // be visible to the angular.
          $rootScope.$apply(function() {
            lastScrollPos = scrollPos;
          });
        });
      }
    }
  })

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>

<div data-ng-app="app" data-ng-controller="MainController">

  <div scroll-counter="" style="height: 400px">
    <span>Current scroll counter = {{ scrollCounter }}</span>
    <br/><br/>
    <span>Current scroll counter = {{ scrollCounter }}</span>
    <br/><br/>
    <span>Current scroll counter = {{ scrollCounter }}</span>
    <br/><br/>
    <span>Current scroll counter = {{ scrollCounter }}</span>
    <br/><br/>
    <span>Current scroll counter = {{ scrollCounter }}</span>
    <br/><br/>
    <span>Current scroll counter = {{ scrollCounter }}</span>
    <br/><br/>
  </div>

</div>