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')