@farris/ui-scrollspy

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 your angular.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>

1. scrollspyData 跟随监听滚动的跟随项数组
2. currentSection 当前active项id
3. fFollowType 跟随样式 默认side 可选项tab
4. scrollGroupId 若一个页面中需要使用两次或以上该滚动监听功能，则除了第一次使用，其他每次使用都需要加上该属性，来标记该滚动属于哪个分组

扩展区域

<ng-template scrollspyItem let-scrollItem='scrollItem'> 该扩展区域内放置自定义跟随项样式

主体区域 被监听滚动的内容区域

<div class="scroll-section" fScrollSpyContainer [fOffset]="50" (fScrollChange)="scrollSectionChange($event)" style="height: 400px; overflow-y: auto;"> 主体部分需要有高度，并且有滚动条设置;

1. 需要设置fScrollSpyContainer属性，当页面需要使用两次及以上该功能时，需要传递值，标志滚动属于哪个分组 <div [fScrollSpyContainer]="'scroll'" ...>
2. offset 偏移量，点击及滚动时每个section的偏移量 默认值是0 ;
3. 添加了fScrollSpyContainer属性的标签，默认加上了position:relative样式

主体部分事件

1. fScrollChange 监听滚动区域变化事件，接收参数为当前滚动到区域部分的id

2. 添加了fScrollSpyContainer 属性的标签，默认加上position:relative 样式了

被跟随section部分

<span [fScrollSpy]="'xxx'"></span>

1. fScrollSpy 属性 传递当前section唯一标识的id
2. 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>