Scroll Directive Not Working in Angular JS

Question

Sorry for the dumb question. I am new to angular JS. I found a nice small scroll directive from http://jsfiddle.net/88TzF/622/ But it is not working when i create the below HTML Dropdown Example

      <ul class="dropdown-menu Container" scroll>
              <div >
          <li ng-repeat="i in items"><a href="#">{{i.value}}</a></li>
                  </div>
        </ul>


      </div>

But if i do the jQuery Way scroll event if firing. Can you please let me know what's going wrong.

Items array has 700+ objects. So it is overflowing.

    .Container
{
    height: 300px;
    overflow: scroll;
}

Thanks in advance.

Answer 1

You are binding scroll event to window, but I assume you are scrolling dropdown container?

If that's the case then you will have to bind scroll event to dropdown container, and checking for this.scrollTop in your if statement.

However, don't forget to unbind scroll event as angular will not be able to handle this on his own.

 app = angular.module('myApp', []); app.directive("scroll", function ($window) { return function(scope, element, attrs) { element.on("scroll", function() { if (this.scrollTop >= 100) { scope.boolChangeClass = true; console.log('Scrolled below header.'); } else { scope.boolChangeClass = false; console.log('Header is in view.'); } scope.$apply(); // Prefer scope.$digest()! }); scope.$on('$destroy', function () { element.off('scroll'); }); }; }); 

 .dropdown-container { height: 300px; border: 1px solid black; overflow: auto; } ul { padding: 0; margin: 0; } li { list-style-type: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div ng-app="myApp" class="test"> <div class="dropdown-container" scroll> <ul class="dropdown-menu"> <li><a href="#">test</a></li> <li><a href="#">test</a></li> <li><a href="#">test</a></li> <li><a href="#">test</a></li> <li><a href="#">test</a></li> <li><a href="#">test</a></li> <li><a href="#">test</a></li> <li><a href="#">test</a></li> <li><a href="#">test</a></li> <li><a href="#">test</a></li> <li><a href="#">test</a></li> <li><a href="#">test</a></li> <li><a href="#">test</a></li> <li><a href="#">test</a></li> <li><a href="#">test</a></li> <li><a href="#">test</a></li> <li><a href="#">test</a></li> <li><a href="#">test</a></li> <li><a href="#">test</a></li> <li><a href="#">test</a></li> <li><a href="#">test</a></li> <li><a href="#">test</a></li> <li><a href="#">test</a></li> <li><a href="#">test</a></li> <li><a href="#">test</a></li> <li><a href="#">test</a></li> <li><a href="#">test</a></li> <li><a href="#">test</a></li> <li><a href="#">test</a></li> <li><a href="#">test</a></li> <li><a href="#">test</a></li> <li><a href="#">test</a></li> <li><a href="#">test</a></li> <li><a href="#">test</a></li> <li><a href="#">test</a></li> <li><a href="#">test</a></li> <li><a href="#">test</a></li> <li><a href="#">test</a></li> <li><a href="#">test</a></li> <li><a href="#">test</a></li> <li><a href="#">test</a></li> </ul> </div> </div>