@farris/ui-scrollspy
v0.1.0
Published
This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 7.2.0.
Downloads
57
Maintainers
Keywords
Readme
Scrollspy
This library was generated with Angular CLI version 7.2.0.
Code scaffolding
Run ng generate component component-name --project scrollspy
to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module --project scrollspy
.
Note: Don't forget to add
--project scrollspy
or else it will be added to the default project in yourangular.json
file.
Build
Run ng build scrollspy
to build the project. The build artifacts will be stored in the dist/
directory.
Publishing
After building your library with ng build scrollspy
, go to the dist folder cd dist/scrollspy
and run npm publish
.
Running unit tests
Run ng test scrollspy
to execute the unit tests via Karma.
Further help
To get more help on the Angular CLI use ng help
or go check out the Angular CLI README.
使用方法
跟随tab部分
<farris-scrollspy [scrollspyData]="tabs" [currentSection]="currentTab" [fFollowType]="'tab'" [scrollGroupId]="'scroll'"></farris-scrollspy>
- scrollspyData 跟随监听滚动的跟随项数组
- currentSection 当前active项id
- fFollowType 跟随样式 默认side 可选项tab
- scrollGroupId 若一个页面中需要使用两次或以上该滚动监听功能,则除了第一次使用,其他每次使用都需要加上该属性,来标记该滚动属于哪个分组
扩展区域
<ng-template scrollspyItem let-scrollItem='scrollItem'>
该扩展区域内放置自定义跟随项样式
主体区域 被监听滚动的内容区域
<div class="scroll-section" fScrollSpyContainer [fOffset]="50" (fScrollChange)="scrollSectionChange($event)" style="height: 400px; overflow-y: auto;">
主体部分需要有高度,并且有滚动条设置;
- 需要设置fScrollSpyContainer属性,当页面需要使用两次及以上该功能时,需要传递值,标志滚动属于哪个分组
<div [fScrollSpyContainer]="'scroll'" ...>
- offset 偏移量,点击及滚动时每个section的偏移量 默认值是0 ;
- 添加了fScrollSpyContainer属性的标签,默认加上了position:relative样式
主体部分事件
fScrollChange 监听滚动区域变化事件,接收参数为当前滚动到区域部分的id
添加了fScrollSpyContainer 属性的标签,默认加上position:relative 样式了
被跟随section部分
<span [fScrollSpy]="'xxx'"></span>
- fScrollSpy 属性 传递当前section唯一标识的id
- fScrollGroup 当一个页面中需要使用两次及以上该功能,需要传递值,标志滚动属于哪个分组
<div [fScrollSpy]="'basic'" [fScrollGroup]="'scroll'" ...>
注意事项
当同一个页面需要使用两个及以上该功能,下面地方需要传递分组情况的属性,其中XXX部分值需要保持一致:
<farris-scrollspy [scrollspyData]="tabs" [currentSection]="currentTab" [fFollowType]="'tab'" [scrollGroupId]="'XXX'"></farris-scrollspy>
<div class="scrollspy-content" [fScrollSpyContainer]="'XXX'" [fOffset]="50" (fScrollChange)="scrollTabChange($event)" style="height: 400px; overflow-y: auto;">
<div class="section" [class.active]="currentTab === 'basic'">
<span [fScrollSpy]="'basic'" [fScrollGroup]="'XXX'" class="anchor"></span>
</div>
</div>