boxes-scroll
Overview
boxes-scroll is a collection of 3 directives for angular 1.x : box-scroll, box-hscroll and box-vscroll
it allows to use angular directive *limitTo* synchronized with a scrollbar.
It is very usefull when you want to show many items without impacting performance, burdened by the increase in watchers.
Those directives limit the number of watchers and improve performance of your application.
More, if you want to scroll in a table but your users want to see the headers fixed, it's done.
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.
With boxes-scroll directives you will design your table with html simply.
You do not build your view in your controller. Don't mix view and model like in others table frameworks.
Like this you can use any front framework like bootstrap or material.
box.scroll is a generic boxe, the scroll direction depends of elements with the anglar directive ng-repeat
If elements are display inline, the scroll will be horizontal, instead the scroll is vertical
The rule for know if the elements are inline are simple, or the compute display contains 'inline' as 'inline-block' or the display equals 'table-cell'
You can use directives as element or as attribute
All examples in this page use box-scroll
With directive box-scroll
| Lastname | Firstname | |
|---|---|---|
Without directive
| Lastname | Firstname | |
|---|---|---|
Requirements
Boxes-scroll depends on only of angular(1.x)
Installation
Installation depends of your package and builder. But you have to add to your project those files :
Install dependencies
Add dependencies
Add module
Comparaison
Compare boxes-scroll directives and a scroll overflow container
| features/impls | box-scroll / box-vscroll / box-hscroll | html table with overflow container |
|---|---|---|
| Watchers | Limit watchers about visible rows. |
Each row increase watchers, visible or not. |
| Faster | The ng-repeat directive draws only visible rows, try demo with 2000 or 10000 item, and check/uncheck 'try without directive'. |
The ng-repeat directive 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. |
| Updatable by api | Really easy, just increment/decrement begin variable. |
Of course you can, scrollTo(value) method on the container, but value is in pixel ?!?!. |
| Ensure item is visible | Really easy too, If you know the index of item, check and update if necessary that index beween begin and begin + limit |
Of course you can, use getClientRect() on container, on item, check second one is include in the first one, and use scrollTo(value) to fix it... complicated. |
| Tree structure | Can't be used, cause all nodes are not rendered. |
Can be used, all nodes are rendered, the tree structure is retained. |
| Nav buttons | Not present. |
In native scrollbars, nav buttons are present. |
Minimal code
But use differents for each directive.
You can use controller variable if you want to test/set them. For example when you active item and you want to ensure that active item is visble.
Use
- Use box-scroll or box-hscroll for box with horizontal scrolling or box-vscroll for box with vertical scrolling
- Set the number of item on total attribute, usually items.length
- Define a scope or controller variable begin on ng-begin attribute, don't set it, the directive will compute it.
- Define a scope or controller variable limit on ng-limit attribute, don't set it, the directive will compute it.
- Set the number of item that you want to see with max attribute, or set css height for define the height/max-height of the container
- On directive ng-repeat add angular filter limitTo with limit and begin variables.
Auto direction scroll
HTML
Almost same code, results completly different. ng-repeat on 'div' element or 'a' element
Vertical scrolling
| Lastname | Firstname | |
|---|---|---|
HTML
HTML
Horizontal scrolling
HTML
Configuration and options
Configuration
As seen before in use section
- total : The number of item, usually items.length
- ng-begin : A scope or controller variable, Each directive have to have its own variable.. The directive manage it
- ng-limit : A scope or controller variable, Each directive have to have its own variable.. The directive manage it
- max : Number of item that you want to see. OR
style height/max-height : The height of container. The html layout allows to not set width/max-width for box-hscroll
Options
Framework with too much options is a bad framework.
So here only 3 options
- show-info-delay : how long the scrolling info appear. 1000 ms.
- debounce : Set the delay before compute ng-limit. 100ms. Increase it if render each row/item is too long.
- allow-keynav : When the component has focus enabled keys navigation. false. Usualy in table you can set true, but for popup dropdown, you should want probably control keys navigation ouside the component
Full Demo with many items
| Lastname | Firstname | Company | Phone | ||
|---|---|---|---|---|---|
| Lastname | Firstname | Company | Phone | ||
|---|---|---|---|---|---|