Infinite Scroll in AngularJS Code With Example

If you’re looking to implement infinite scrolling functionality in your AngularJS application, you’ve come to the right place. This code snippet showcases a simple implementation of infinite scroll using AngularJS directives and HTTP requests. With this code, you can dynamically load more items as the user scrolls down the list, creating a seamless and efficient user experience.

By making HTTP requests to an API, fetching random text, and appending it to the existing list, you can easily extend the functionality of your application. Take a look at the example on the demo page to see how it works.

How to Create Infinite Scroll in AngularJS

Create the HTML structure for infinite scroll as follows:

<div data-ng-app='demo'>
  <div data-ng-controller='MainController'>
    <ul class='hello' when-scrolled='more()'>
      <li data-ng-repeat='item in items'>
        {{item}}
      </li>
    </ul>
    <div data-ng-show='loading'>Loading</div>
  </div>
</div>
<h1>INFINITE SCROLLING IN ANGULARJS</h1>

Style the interface using the following CSS styles:

li {
  display: block;
  list-style-type: none;
  margin-bottom: 1em;
}
.cd__main{
   display: block !important;
}
ul {
  height: 250px;
  background: #44E394;
  color: #fff;
  overflow: auto;
  width: 550px;
  border-radius: 5px;
  margin: 0 auto;
  padding: 0.5em;
  border: 1px dashed #11BD6D;
}
ul::-webkit-scrollbar {
  width: 8px;
  background-color: transparent;
}
ul::-webkit-scrollbar-thumb {
  background-color: #b0fccd;
  border-radius: 10px;
}
ul::-moz-scrollbar {
  width: 8px;
  background-color: transparent;
}
ul::-moz-scrollbar-thumb {
  background-color: #b0fccd;
  border-radius: 10px;
}
ul::-ms-scrollbar {
  width: 8px;
  background-color: transparent;
}
ul::-ms-scrollbar-thumb {
  background-color: #b0fccd;
  border-radius: 10px;
}

body {
  text-align: center;
  font-size: 1.2em;
  font-family: "Helvetica";
  color: #44E394;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAG0lEQVQIW2P88OHDfwY0wAgSFBAQYEQWp1AQAKUbE9XRpv7GAAAAAElFTkSuQmCC) repeat;
  padding: 2em;
}

Load the AngularJS by adding the following CDN link before closing the body tag:

<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js'></script>

Finally, use the following JavaScript function to activate the infinite scroll:

app = angular.module("demo", []);

app.controller("MainController", function($scope, $http){
  
  // the array which represents the list
  $scope.items = ["1. Scroll the list to load more"];
  $scope.loading = true;
  
  // this function fetches a random text and adds it to array
  $scope.more = function(){
    $http({
      method: "GET",
      url: "https://baconipsum.com/api/?type=all-meat&paras=2&start-with-lorem=1"
    }).success(function(data, status, header, config){
      
      // returned data contains an array of 2 sentences
      for(line in data){
        newItem = ($scope.items.length+1)+". "+data[line];
        $scope.items.push(newItem);
      }
      $scope.loading = false;
    });
  };
  
  // we call the function twice to populate the list
  $scope.more();
});

// we create a simple directive to modify behavior of <ul>
app.directive("whenScrolled", function(){
  return{
    
    restrict: 'A',
    link: function(scope, elem, attrs){
    
      // we get a list of elements of size 1 and need the first element
      raw = elem[0];
    
      // we load more elements when scrolled past a limit
      elem.bind("scroll", function(){
        if(raw.scrollTop+raw.offsetHeight+5 >= raw.scrollHeight){
          scope.loading = true;
          
        // we can give any function which loads more elements into the list
          scope.$apply(attrs.whenScrolled);
        }
      });
    }
  }
});

That’s all! hopefully, you have successfully integrated this infinite scroll AngularJS code example into your project. If you have any questions or suggestions, feel free to comment below.