angular-ui-scroll

$3


looking for next Angular version? try ngx-ui-scroll ☞

$3

- Introduction
- Why?
- How it works
- Basic usage
- Examples
- Install and connect
- uiScroll directive
- Parameters
- Datasource
- Adapter
- uiScrollViewport directive
- jqLiteExtras service
- uiScrollTh and uiScrollTd
- GridAdapter
- Development
- Change log


-------------------

Introduction

$3

The common way to present to the user a list of data elements of undefined length is to start with a small portion at the top of
the list - just enough to fill the space on the page. Additional rows are appended to the bottom of the list as the user scrolls
down the list.

The problem with this approach is that even though rows at the top of the list become invisible as they scroll out of the view,
they are still a part of the page and still consume resources. As the user scrolls down the list grows and the web app slows down.

This becomes a real problem if the html representing a row has event handlers and/or angular watchers attached. A web app of an average
complexity can easily introduce 20 watchers per row. Which for a list of 100 rows gives you total of 2000 watchers and a sluggish app.

$3

The uiScroll directive solves the problem just described by dynamically destroying elements as they become invisible and recreating
them if they become visible again.

The uiScroll directive is similar to the ngRepeat. Like the ngRepeat, uiScroll directive instantiates a template once per item from a
collection. Each template instance gets its own scope, where the given loop variable is set to the current collection item. The
collection content is provided by the datasource.

The directive is asking the datasource for data to build and render elements until it has enough elements to fill out the viewport.
It will start retrieving new data for new elements again if the user scrolls up/down to the edge of visible element list.



$3

``html


...


`
Listing ANY for the tag, the directive can be applied to, stretches the truth - a little bit. The directive works well with majority
of the 'usual' tags - divs, spans, a, inputs, etc. For all of them the viewport should be a div (unless it is the window). Some other
tags require special treatment. If the repeated tag is a li, it is best to use ul or ol as a viewport. For a tr as a repeated tag the
viewport has to be the table or tbody. dl as a repeated tag is not supported.

The viewport is an element representing the space where the items from the collection are to be shown. Unless specified explicitly with
the uiScrollViewport directive, browser window will be used as the viewport.

_Important!_ The viewport height must be constrained. If the height of the viewport is not constrained
(style="height:auto") it will pull the entire content of the datasource and may throw an Error depending on the number of items
in the datasource. Even if it does not, using the directive this way does not provide any advantages over using ng-repeat, because
item template will be always instantiated for every item in the datasource.

_Important!_ There is a Scroll Anchoring feature enforced by some browsers (e.g Google Chrome since v56) which makes scroller behavior incorrect.
The ui-scroll-viewport directive eliminates this effect by disabling the 'overflow-anchor' css-property on its element.
But if the ui-scroll-viewport is not presented in the template, you should take care of this manually by switching it off on the body/html container.

$3

We have built pull of examples covering a number of use-cases, showing various ways to use the ui-scroll directive. Each demo is
absolutely independent and has its own html-page and the javascript file with the same name and .js extension.

To run the examples use __this link__.

$3

To install the package via __npm__ use

`
npm install --save angular-ui-scroll
`

After installation via npm, the ui-scroll distributive files will be available as

`