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:
; ...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'>icontent </div></ztwScroll>
2.ScrollTo
<ul> <li *ngFor='let i of list'> <='scrollValue=i.index'>iname </button> </li></ul> <ztwScroll ngModel='scrollValue'> <div *ngFor='let i of list' ztwScrollControl='i.index'> icontent</div></ztwScroll>
3.Just use scroll
Scroll to the specified location
template:`<ztwScroll #ztwScroll></ztwScroll>` ...... @ztwScroll; { thisztwScroll; }
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='*' stylebackground='bg' useEntry='true' entry='entry($event)'></div></ztwScroll> bg:string; { if$event=='upIn'return thisbg='red'; if$event=='belowIn'thisbg='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')