Inifinite Scroll for Web

What is infinite scroll

There are a lot of cases we have a lot items to show on mobile.
In twitter, scroll listview and if the user reaches bottom, and scroll more, more items are loaded. In iOS, that kind of UI was provided by default.
I want to do same in mobile web.

How to

In this time, I introduce 2 ways to realize infinite scroll.
The way is following:

ngInifiniteScroll

ngInfiniteScroll works with AngularJS.
The way to use is quite simple.
The lib is provided as bower component.
If your project uses bower, you can use bower install

bower install ngInfiniteScroll --save

HTML

<html>
<head>
   <title>UI Test</title>
   <link rel="stylesheet" type="text/css" href="../bower_components/bootstrap/dist/css/bootstrap.min.css">
   <link rel="stylesheet" type="text/css" href="css/scroll.css">
   <script src="../bower_components/jquery/dist/jquery.min.js"></script>
   <script src="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
   <script src="../bower_components/angular/angular.min.js"></script>
   <script src="../bower_components/ngInfiniteScroll/build/ng-infinite-scroll.min.js"></script>
   <script src="./js/scroll.js"></script>
</head>
<body ng-app="appModule" ng-controller="pageController">
<div class="container">
   <div class="scroll" infinite-scroll='loadMore()'>
        <p>TitleA</p>
   	<div class="box" ng-repeat='el in els'>
     		<div class="box-inline">
		{{el}}
     		</div>
   	</div>
   </div>
</div>
</body>
</html>

infinite-scroll is data management method.
This is implemented angular controller.

JavaScript(scroll.js)

var appModule = angular.module("appModule", ['infinite-scroll']);

appModule.controller('pageController', function($scope){

  $scope.els = [1, 2, 3, 4, 5, 6, 7, 8];

  $scope.loadMore = function() {
    var last = $scope.els[$scope.els.length - 1];
    for(var i = 1; i <= 10; i++) {
      $scope.els.push(last + i);
    }
  };
});
&#91;/javascript&#93;

<h3>Create by myself with jQuery</h3>
To make this, we need to detect scroll bottom.
After scrolling bottom, we load more items.
This is an example.
<h4>HTML</h4>
[html]
<html>
<head>
   <title>UI Test</title>
   <link rel="stylesheet" type="text/css" href="../bower_components/bootstrap/dist/css/bootstrap.min.css">
   <link rel="stylesheet" type="text/css" href="css/scroll.css">
   <script src="../bower_components/jquery/dist/jquery.min.js"></script>
   <script src="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
   <script src="../bower_components/angular/angular.min.js"></script>
   <script src="./js/scroll2.js"></script>
</head>
<body ng-app="appModule" ng-controller="pageController">
<div class="container">
   <div class="scroll">
        <p>TitleA</p>
   	<div class="box" ng-repeat='el in els'>
     		<div class="box-inline">
		{{el}}
     		</div>
   	</div>
   </div>
</div>
</body>
</html>
[/html]
div part which has ng-repeat is inifinite scroll parts.

<h4>JS(scroll2.js)</h4>
[javascript]
var appModule = angular.module("appModule", []);

appModule.controller('pageController', function($scope){

  $scope.els = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15];

  var loadMore = function() {
    var last = $scope.els[$scope.els.length - 1];
    for(var i = 1; i <= 10; i++) {
      $scope.els.push(last + i);
    }
  }


  $(window).on('scroll', function() {
     if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
        loadMore();
        $scope.$apply();
     }
  });
});

This is core part.
Detect scroll event by jquery and calculate current position and if reach bottom, load more data. And update UI.