What is the best way to ask "Is there more to scroll or have we reached the bottom of the scrollable area in Angular?"

Have a single page app with a fixed bottom navbar and want to display a ui cue indicating that there is more content to be displayed, conditional on not being at end of page. Thinking there is a bookmark way (hash tag) to do this.

What is the best way to ask "Is there more to scroll or have we reached the bottom of the scrollable area in Angular?"

Have a single page app with a fixed bottom navbar and want to display a ui cue indicating that there is more content to be displayed, conditional on not being at end of page. Thinking there is a bookmark way (hash tag) to do this.

• javascript
• css
• twitter-bootstrap
• angularjs

Share Improve this question Follow edited Feb 7, 2013 at 23:13 madth3 7,3441212 gold badges5252 silver badges7474 bronze badges asked Feb 6, 2013 at 6:30 Robert ChristianRobert Christian 18.3k2020 gold badges7676 silver badges9090 bronze badges 3

• 2 this is more jquery/dom related than angularJS related , at the end of the day , you'll have to write a directive for that. – mpm Commented Feb 6, 2013 at 7:16
• wonder if scrollspy would work here as well – Robert Christian Commented Feb 23, 2013 at 16:15
• see also: github./angular-ui/ui-utils/blob/master/modules/scroll/… – apairet Commented Jun 23, 2014 at 8:13

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

Here is kind of solution: I've created directive that bind scrolling event and in case of it is possible to scroll down it show div, appended in pile time:

app.directive('thereIsMore', function() {
  return {
    restrict: 'A',    
    scope: true,
    pile: function(tElement) {
      tElement.append('<div class="there-is-more" ng-show="bottom">There is more...</div>');
      return function(scope, element) {
        var elm = element[0];        
        var check = function() {
          scope.bottom = !(elm.offsetHeight + elm.scrollTop >= elm.scrollHeight);
        };
        element.bind('scroll', function() {
          scope.$apply(check);          
        });
        check();        
        }; // end of link 
    }    
  };
});

Working example: http://plnkr.co/edit/8W3E7BunpDxIkEPDqxzb?p=preview