Virtual scroll with filtering and custom scrollbar - AngularJS reusable UI component

AngularJS directive which implements the virtual scroll, filtering of the items and the customizable scrollbar

• good performance even millions of the items in the list
• only visible items are rendered in the browser

• if scrollbar items are array of strings - filtering by string value
• if scrollbar items are array of objects - filtering by string from all properties of the object

• custom scrollbar is used instead of native scrollbar of the browser
• scrollbar can be easily customised using the CSS
• scrollbar is looking similar in all browsers

• include the vsscrollbar-0.1.6.min.js and the vsscrollbar-0.1.6.min.css files into your project. See the Build project and the Installation chapters below.

<script src="vsscrollbar-0.1.6.min.js"></script>
<link href="vsscrollbar-0.1.6.min.css" rel="stylesheet" type="text/css">

• inject the vsscrollbar module into your application module.

angular.module('vssampleapp', ['vsscrollbar']);

• add vsscrollbar HTML tag into your HTML file. See the HTML example paragraph below.
• add needed Javascript code. See the Javascript example paragraph below.

<vsscrollbar items="allItems" items-in-page="5"
             on-scroll-change-fn="onScrollChange(topIndex, maxIndex, topPos, maxPos, 
                                  filteredPageCount, filteredItemCount, visibleItems)"
             on-focus-scrollbox-fn="onFocusScrollbox(focused)">
    <!- parent implements this part - begin -->                              
    <div id="item" ng-repeat="item in visibleItems track by $index" 
                   ng-click="itemClicked($index, item);">
        <div id="itemtext">{{item}}</div>
    </div>
    <!- parent implements this part - end -->
</vsscrollbar>

It is also possible to use ng-model="response" instead of on-scroll-change-fn callback to get responses from the scrollbar component.

var sampleapp = angular.module('vssampleapp', ['vsscrollbar']);
sampleapp.controller('vsScrollbarCtrl', function ($scope, vsscrollbarEvent, vsscrollbarConfig) {
    $scope.visibleItems = [];
    
    // Scrollbox focus/blur callback - invoked when the scrollbox get/lost focus
    $scope.onFocusScrollbox = function (focused) {
        console.log('onFocusScrollbox(): focused: ', focused);
    };
    
    // Scroll change callback - **visibleItems** are shown in the scrollbar using the **ng-repeat**. See above.
    $scope.onScrollChange = function (topIndex, maxIndex, topPos, maxPos, 
                                      filteredPageCount, filteredItemCount, visibleItems) {
        $scope.visibleItems = visibleItems;
        ...
    };
};

By injecting the vsscrollbarEvent the parent can send events to the vsscrollbar component by calling service functions.

For example add item named "My item" to the index "2".

vsscrollbarEvent.addItem($scope, 2, 'My item');

1. Items are array of strings

/*
['Item #20', 'Item #21', 'Item #30', 'Item #40']
*/

vsscrollbarEvent.filter($scope, '2');

Result of the above filter command is two items, because two items contain the string 2.

2. Items are array of objects

/*
[{
    "id":0,
    "code":"EI",
    "name":"ABC"
},
{
    "id":1,
    "code":"DD",
    "name":"DEF"
}]
*/

vsscrollbarEvent.filter($scope, 'e');

Result of the above filter command is two objects, because two objects contain the string e.

In the examples folder of this project has the sample app and the online demos are here

Depends on AngularJS. Implemented using the AngularJS version 1.4.3.

• Build can be done by executing the grunt command. It creates the dist/debug and the dist/min folders and put files to these folders.

grunt

• Installation can be done using the bower. It installs files from the dist/debug and the dist/min folders. Needed CSS and javascript files are located in these folders.

bower install vsscrollbar

• IE 9+
• Safari 5
• Firefox 36.0.4
• Google Chrome 41.0.2272.101
• Opera 28.0

• License: MIT

• Author: kekeh