AngularJS: Infinite Scrolling

HTML

<div id="fixed" when-scrolled="loadMore()">
  <ul> Run
 Update
 Fork
 Tidy
 Collaborate
 Embed
New Code hinting (autocomplete) in Beta
Code hinting will suggest some common CSS prop and value names, same for JavaScript. This feature is off by default while in beta.

Previous updateGot it
 Settings
Sign in
Diff between the saved and locally drafted fiddle:
Apply local draft version or discard it

Editor layout
 Classic
 Columns
 Bottom results
 Right results
 Tabs
General
 Dark theme

 Line numbers

 Wrap lines

 Indent with tabs

 Code hinting (autocomplete) (beta)

Indent size:

Key map:

Font size:

Behavior
 Auto-run code

 Only auto-run code that validates

 Auto-save code (bumps the version)

 Auto-close HTML tags

 Clear console on run

 Live code validation

 Highlight matching tags

Boilerplates
 Show boilerplates bar less often

Tabs:
 JavaScript  HTML  CSS  Result
Visual:
  Light   Dark

Accent color
 
Font color
 
Menu background
 
Code background
Embed snippet Prefer iframe?:

<script async src="{embedSrc}"></script>

Author

russianpenguin
Fiddle meta
Resources URL cdnjs 0
Async requests
Other (links, license)

Easiest way to keep your customers in the loop about your product
ads via Carbon
Like JSFiddle?

If you don't mind tech-related ads, and want to keep us running, whitelist JSFiddle in your ad blocker.

Thank you! ❤️

HTML 

1
<div id="fixed" when-scrolled="loadMore()">
2
  <ul>
3
    <li ng-repeat="i in items">{{i.id}}</li>
    <li ng-repeat="i in items">{{i.id}}</li>
  </ul>  
</div>

CSS

li {
  height: 120px;
  border-bottom: 1px solid gray;
}

#fixed {
    height: 400px;
    overflow: auto;
}

JavaScript

function Main($scope) {
    $scope.items = [];
    
    var counter = 0;
    $scope.loadMore = function() {
        for (var i = 0; i < 5; i++) {
            $scope.items.push({id: counter});
            counter += 10;
        }
    };
    
    $scope.loadMore();
}

angular.module('scroll', []).directive('whenScrolled', function() {
    return function(scope, elm, attr) {
        var raw = elm[0];
        
        elm.bind('scroll', function() {
            if (raw.scrollTop + raw.offsetHeight >= raw.scrollHeight) {
                scope.$apply(attr.whenScrolled);
            }
        });
    };
});