Drag for scroll and load dynamically

by Suryar Praveen

HTML

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<div ng-app="Scroll">
Drag for scroll please
<div class="container" ng-controller="ScrollCtrl">
    <div id="content">
        <div ng-repeat="item in list">
            Item: {{item}}
        </div>
    </div>
    
    
</div>

<div>
    <h1>
    Testing Heading
    </h1>
    <p>
    This is the drag for scroll and load dynamic data on drag of the page. This is the drag for scroll and load dynamic data on drag of the page.This is the drag for scroll and load dynamic data on drag of the page.This is the drag for scroll and load dynamic data on drag of the page.This is the drag for scroll and load dynamic data on drag of the page.This is the drag for scroll and load dynamic data on drag of the page.This is the drag for scroll and load dynamic data on drag of the page.This is the drag for scroll and load dynamic data on drag of the page.This is the drag for scroll and load dynamic data on drag of the page.This is the drag for scroll and load dynamic data on drag of the page.This is the drag for scroll and load dynamic data on drag of the page.This is the drag for scroll and load dynamic data on drag of the page.This is the drag for scroll and load dynamic data on drag of the page.This is the drag for scroll and load dynamic data on drag of the page.This is the drag for scroll and load dynamic data on drag of the page.This is the drag for scroll and load dynamic data on drag of the page.This is the drag for scroll and load dynamic data on drag of the page.This is the drag for scroll and load dynamic data on drag of the page.This is the drag for scroll and load dynamic data on drag of the page.This is the drag for scroll and load dynamic data on drag of the page.This is the drag for scroll and load dynamic data on drag of the...

CSS

.container {
    width: 200px;
    height: 200px;
    border: 1px solid;
    overflow: hidden;
}

#content {
    width: 100%;
}

JavaScript

var containerHeight = 200;
var loadMargin = 10;

var i;

angular.module('Scroll', []).controller('ScrollCtrl', function($scope) {
    $("#content").draggable({
        axis: 'y',
        drag: function(evt, ui) {
            var minTop = containerHeight - $("#content").height();
            
            if (ui.position.top < minTop + loadMargin) {                
                //Load some more stuff here... $http anyone?
                $scope.list.push(i);
                i += 1;
                console.log('Loading!!!');
                                
                //If you load ur stuff with $http or an Angular service
                //in principle you wont need this $digest
                $scope.$digest();
            }
            
        }
    });
    
    $scope.list = [];
    for (i = 0; i < 20; i ++) {
        $scope.list.push(i);
    }
});