title: Angular Infinite Scroll: scroll bar on body not on div
body: <p>I implementing infinite scroll in my web app using angularjs. I found this useful directive on net <a href="http://www.dotnetawesome.com/2016/03/infinite-scroll-for-facebook-like-pagination-angularjs.html" rel="nofollow">Infinite Scroll</a>, but the problem is this can only be implemented inside div not in the scroll bar body:</p>
  
  <pre><code>app.directive('infinityscroll', function () {
      return {
          restrict: 'A',
          link: function (scope, element, attrs) {
              element.bind('scroll', function () {
                  if ((element[0].scrollTop + element[0].offsetHeight) == element[0].scrollHeight) {
                      //scroll reach to end
                      scope.$apply(attrs.infinityscroll)
                  }
              });
          }
      }
  });
  </code></pre>
  
  <p>Here is my html codes:</p>
  
  <pre><code>&lt;div infinityscroll="NextPage()" style="height:700px; overflow:auto;" &gt;
    &lt;div ng-repeat="item  in listItems"&gt;
         &lt;img ng-src="{{item.picture}}" alt="broken" style=""&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>when i remove the inline css it won't work.so how can i change the infinite scroll in the body instead of div?</p>