BOXES-SCROLL : synchronize ng-repeat with scrollbar

Web site

https://hhdevelopment.github.io/boxes-scroll/

https://boxes-scroll.herokuapp.com/

Overview

boxes-scroll is a collection of directives for angular 1.x

it allows to use angular directive limitTo synchronized with a scrollbar.

It is very usefull to use those directives when you want to show many items without impacting performance, burdened by the increase in watchers.

Those directeives limit the number of watchers and improve performance of your application.

More it is really usefull, if you want to scroll in a table but your users want to see the headers fixed.

Set size of your table in pixel on box, or set the maximun items that you want and box-scroll compute pertinent limit and manage begin variable.

Comparaison

features/impls	box-vscroll	html table with overflow container
watchers	limit watchers about visible rows	each row increase watchers, visible or not
faster	ng-repeat draws only visible rows, try demo with 2000 or 10000 item, and check/uncheck 'try without directive'	ng-repeat draws all rows, try demo with 2000 or 10000 item, and check/uncheck 'try without directive'
headers	headers are always visible	headers go away when scroll
scrollbar	scrollbar is collapsible, scrollbar indicator get only 4px	depends to browsers, but scrollbar get minimum 16px
cells size	cells size depends only of data visible. It's more efficient	cells size depends of data in all rows. So if one cell contains too large text, all cells in the same column is changed.
scroll indicator	has scroll indicator	has not
tree structure	Can't be used, cause all nodes are not rendered	Can be used, all nodes are rendered, the tree structure is retained

Installation

Installation is easy with minimal dependencies - only the AngularJS and Jquery

Install with NPM

$ npm install boxes-scroll

Adding dependency to your project

When you are done downloading all the dependencies and project files the only remaining part is to add dependencies on the scroll-box AngularJS module:

require('./node_modules/boxes-scroll/dist/boxesscroll.css');
require('./node_modules/boxes-scroll/dist/boxesscroll.js');

angular.module('myModule', ['boxes.scroll']);

Uses

boxes-scroll have two directives

• box-vscroll : it is the most common use. it is a box with vertical scrollbar, synchronized with ng-repeat:
  for example, on tr in the table with many rows.
• box-hscroll : A box with horizontal scrollbar, synchronized with ng-repeat.

HTML

Example with bootstrap table

<box-vscroll total="ctrl.items.length" ng-begin="begin" ng-limit="limit"
					style="border:solid 1px black;height:300px">
	<table class="table table-hover table-striped">
		<thead>
			<tr>
				<th></th>
			</tr>
		</thead>
		<tbody>
			<tr ng-repeat="item in ctrl.items| limitTo:limit:begin">
				<td ng-bind="item"></td>
			</tr>
		</tbody>
	</table>
</box-vscroll>

(function (ng) {
	'use strict';
	ng.module('app', ['boxes.scroll']).controller('AppCtrl', AppCtrl);
	function AppCtrl() {
		var ctrl = this;
		ctrl.items = [.......];
	}
})(angular);

Configuration

Important : For vertical box-vscroll container, you have to set the height css property. Instead, you can set max-height.
If you use max-height, you will see the item drawed one by one. Prefer height, mostly if many items will be visible.
If you don't set height or max-height you have to set the max attribute.

Attributes configuration

1. total (number) : The number of items
2. ng-limit : the limit of window for directive limitTo. This value is managed by the directive, don't set it, just name it, in controller or scope
3. ng-begin : the begin of window for directive limitTo. This value is managed by the directive, don't set it, just name it, in controller or scope
4. show-info-delay (number) (optional) : define the delay of time the infos about the window appears. Default value 1000 ms
5. debounce (number) (optional) : Set the delay before compute ng-limit. Default value 100 ms
6. max (number) (optional) : Define the maximun of number items rendered

Soon features

Choose position of scrollbars,

• box-vscroll : left, right(default), both
• box-hscroll : top, bottom(default), both