# ng-virtual-scroll-viewport
**Repository Path**: xujz520/ng-virtual-scroll-viewport
## Basic Information
- **Project Name**: ng-virtual-scroll-viewport
- **Description**: 虚拟滚动组件
- **Primary Language**: TypeScript
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: https://xujz520.gitee.io/ng-virtual-scroll-viewport
- **GVP Project**: No
## Statistics
- **Stars**: 1
- **Forks**: 0
- **Created**: 2022-10-31
- **Last Updated**: 2023-06-28
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# virtual-scroll-viewport 虚拟滚动
## [在线示例](https://xujz520.gitee.io/ng-virtual-scroll-viewport) | [在 stackblitz 中打开](https://stackblitz.com/github/xujz520/ng-virtual-scroll-viewport)
## API
```html
```
| 参数 | 说明 | 类型 | 默认值 |
| - | - | - | - |
| [list] | 列表数据源 | any[] | |
| [itemSize] | 行高 | number | |
| [maxBuffer] | 最大缓冲尺寸 | number | 默认为视口的高度 |
| [minBuffer] | 最小缓冲尺寸, 滚动时小于该值将更新视图 | number | 默认为视口高度的一半 |
| [disabled] | 是否禁用虚拟滚动 | boolean | false |
| (update) | 视图更新事件 | EventEmitter | |
## 原理
```html
```
* viewport 滚动视口(固定高度)
* contentwrapper 内容包裹层
* content-spacer 内容占位垫片 = itemSize * list.length
* list 原始数据
* vList 在视口展示的数据
* itemSize 行高(必须)
* maxBuffer 最大缓冲尺寸
* minBuffer 最小缓冲尺寸, 滚动时小于该值将更新视图 `vList`
```ts
// 滚动事件
updateVList() {
// 标识是否需要更新
needUpdate = false;
if (内容向上滚动) {
needUpdate = bottomBuffer(底部缓冲区) < minBuffer;
} else {
needUpdate = topBuffer(顶部缓冲区) < minBuffer;
}
if (!needUpdate) return;
// 切割出需要展示的内容
start = Math.max(scrollTop - maxBuffer, 0) / this.itemSize;
end = (scrollTop + viewportClientHeight + maxBuffer) / this.itemSize;
this.vList = this.list.slice(start, end);
// 设置视口内容偏移
this.marginTop = start * this.itemSize;
}
```
