ztw-angular-scroll v1.0.2

ztw-angular-scroll-DEMO

ztw-angular-scroll for angular2 &&angular4

Installation Module:

install ztw-angular-scroll:

 npm install ztw-angular-scroll --save

import our main module:

    
import {ZTWScrollModule} from 'ztw-angular-scroll/ztw-scroll.module';
    ...
imports:[...,ZTWScrollModule,...]

Demo

Demo address:·GITHUB

Run demo :npm start

1.Basic usage

<ztwScroll [(ngModel)]='scrollValue'>
   <div *ngFor='let i of list' ztwScrollControl='i.index'>{{i.content}} </div>
</ztwScroll>

2.ScrollTo

<ul>
  <li *ngFor='let i of list'>
     <button (click)='scrollValue=i.index'>{{i.name}} </button>
  </li>
</ul>
    
<ztwScroll [(ngModel)]='scrollValue'>
   <div *ngFor='let i of list' ztwScrollControl='i.index'> {{i.content}}</div>
</ztwScroll>

3.Just use scroll

Scroll to the specified location

template:`<ztwScroll #ztwScroll></ztwScroll>`
    ......
class example{
  @ViewChild('ztwScroll')ztwScroll;
  scrollTo(pos:number){
    this.ztwScroll.scrollTo2(pos);
    }
  }

4.Listening Scroll and set baseLine

<nav class='fixed-top' #nav> ....</nav>
<ztwScroll [baseLine]='nav.offsetHeight' (topEvent)='scrollListener($event)' [(ngModel)]='scrollValue'>
   ....
</ztwScroll>

Default baseline is the top of the window

also you can set baseLine just for control:

<ztwScroll  [(ngModel)]='scrollValue'>
   <div ztwScrollControl='1'>  </div>
   <div ztwScrollControl='2' [baseLine]='50'> </div>
</ztwScroll>

5.Depth control scrollControl

<ztwScroll ...>
   <div ztwScrollControl='*' [style.background]='bg' [useEntry]='true' (entry)='entry($event)'></div>
</ztwScroll>

class example{ bg:string; entry($event){ if($event=='upIn')return this.bg='red'; if($event=='belowIn')this.bg='green'; } }

>(entry):$event=` 'upIn'` |` 'upOut'` | `'belowIn'` |` 'belowOut'`. 


### API

***`<ztwScroll>`***

* [baseLine]

* [throttleTime]

* (topEvent)

* [justScroll]

* scrollTo(index|'ztw_top'|'ztw_bottom'):Promise

* scrollTo2( **`topPosition`** :number,**`outEase`**?:boolean,**`scrollTotalTime`**?:number(ms),**`scrollSpeed`**?:number(ms)):Promise

* calControls():void 
>>  *If you change the scrollControl's position,you shoul call it.It let the program recalcute scrollContol's absolute top and bottom*

..
---
***`[ztwScrollControl]`***

* [baseLine]

* [over]
>> over='bottom': change the trigger event to be the bottom of window;

* [useEntry]&&(entry)
>> entry($event: 'upIn' | 'upOut' | 'belowIn' | 'belowOut')