# @farris/ui-scrollspy

> This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 7.2.0.

Latest version **0.1.1** (published 2025-02-21) · 0 weekly downloads

## Install

```sh
npm install @farris/ui-scrollspy
pnpm add @farris/ui-scrollspy
yarn add @farris/ui-scrollspy
bun add @farris/ui-scrollspy
```

## Health

**Score 35/100 (D)** — status: maintenance-mode.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.1 |
| Published | 2025-02-21 |
| First published | 2019-08-15 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 662.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | castint, jiweitao1986, chenshj, hxling, ximena, wang-xh, huyuyang, courage007, liwftr, testqq, guozhiqi, tsing-y, zhuorujing, aalizzwell, gibbonnet, max.wang, npm407949480, toxiic, douck, yee-xing, muyi-s, wangjinzhe, hog-rider, volibear, zhangqian09, cassiel19, lvjiabiao, lijiangkun |

## Links

- npm: https://www.npmjs.com/package/@farris/ui-scrollspy
- npm.io page: https://npm.io/package/@farris/ui-scrollspy

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^1.9.0

## Recent versions

- 0.1.1 (latest) — 2025-02-21
- 0.1.0 — 2024-03-19
- 0.0.30 — 2023-07-11
- 0.0.29 — 2023-05-29
- 0.0.28 — 2022-11-14
- 0.0.27 — 2021-08-28
- 0.0.26 — 2021-08-11
- 0.0.25 — 2021-07-30
- 0.0.24 — 2021-03-26
- 0.0.23 — 2021-01-27
- 0.0.22 — 2021-01-27
- 0.0.21 — 2021-01-26
- 0.0.20 — 2021-01-15
- 0.0.19 — 2021-01-11
- 0.0.18 — 2020-07-29
- … 17 more at https://npm.io/package/@farris/ui-scrollspy/versions

## README

# Scrollspy

This library was generated with [Angular CLI](https://github.com/angular/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](https://karma-runner.github.io).

## Further help

To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).

## 使用方法

### 跟随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

4. 添加了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>
```

---
_Source: https://npm.io/package/@farris/ui-scrollspy · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._