# stenciljs-virtual-scroll
> steniljs virtual scroll webcomponent
Latest version **1.2.2** (published 2018-06-26) · MIT license · 0 weekly downloads
## Install
```sh
npm install stenciljs-virtual-scroll
pnpm add stenciljs-virtual-scroll
yarn add stenciljs-virtual-scroll
bun add stenciljs-virtual-scroll
```
## Health
**Score 30/100 (F)** — status: abandoned.
Positive: has types; esm support; no vulnerabilities; high quality score.
Warnings: low downloads.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 1.2.2 |
| Published | 2018-06-26 |
| First published | 2018-01-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 215.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 17 |
| Author | mgnstudio |
| Maintainers | mgnstudio |
| Keywords | virtual scroll, scroll, stenciljs, webcomponent, web components |
## Links
- npm: https://www.npmjs.com/package/stenciljs-virtual-scroll
- Repository: https://github.com/mgnstudio7/stenciljs-virtual-scroll
- Homepage: https://github.com/mgnstudio7/stenciljs-virtual-scroll#readme
- Issues: https://github.com/mgnstudio7/stenciljs-virtual-scroll/issues
- npm.io page: https://npm.io/package/stenciljs-virtual-scroll
## Dependencies (2)
- [@stencil/core](https://npm.io/package/@stencil/core.md) 0.9.11
- [@stencil/utils](https://npm.io/package/@stencil/utils.md) 0.0.4
## Recent versions
- 1.2.2 (latest) — 2018-06-26
- 1.2.1 — 2018-06-26
- 1.1.12 — 2018-04-23
- 1.1.11 — 2018-04-23
- 1.1.10 — 2018-01-29
- 1.1.9 — 2018-01-19
- 1.1.8 — 2018-01-16
- 1.1.7 — 2018-01-16
- 1.1.6 — 2018-01-14
- 1.1.5 — 2018-01-14
- 1.1.4 — 2018-01-14
- 1.1.3 — 2018-01-14
- 1.1.2 — 2018-01-14
- 1.1.1 — 2018-01-14
- 1.1.0 — 2018-01-14
- … 4 more at https://npm.io/package/stenciljs-virtual-scroll/versions
## README
# Stenciljs-virtual-scroll
This is a project for building a standalone Virtual Scroll Web Component using Stencil.
Project contain collection of two components:
**1.** virtual-scroll (VirtualScrollWebComponent).
This component render subset of elements with **DIFFERENT** height, required to fill the viewport
**2.** fetch-helper (FetchHelperWebComponent)
This component show you, how to use virtual scroll without framework.
## Get Started with Angular5 (Ionic 3)
**Step 1.** Install Stenciljs-virtual-scroll
```sh
npm install stenciljs-virtual-scroll --save
```
**Step 2.** Import virtual scroll component into your angular app module
```ts
....
import 'stenciljs-virtual-scroll/dist/virtualscroll';
....
```
**Step 3.** Import CUSTOM_ELEMENTS_SCHEMA into your angular app module
```ts
....
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
....
@NgModule({
...
schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
....
})
export class AppModule { }
```
**Step 4.** Copying the Components
For Angular2+
During the build, the components need to be copied to the build output directory. The easiest way to do this is to modify include the collection in the assets array of the .angular-cli.json file.
```json
"assets": [
"assets",
"favicon.ico",
{ "glob": "**/*", "input": "../node_modules/stenciljs-virtual-scroll/dist/virtualscroll", "output": "./virtualscroll" }
]
```
For Ionic2+
You must use app-script to copy web component files in www directory
1. Add in package.json
```json
"config": {
"ionic_copy": "./config/copy.config.js"
}
```
2. Create config/copy.config.js and put in
```ts
// this is a custom dictionary to make it easy to extend/override
// provide a name for an entry, it can be anything such as 'copyAssets' or 'copyFonts'
// then provide an object with a `src` array of globs and a `dest` string
module.exports = {
copyAssets: {
src: ['{{SRC}}/assets/**/*'],
dest: '{{WWW}}/assets'
},
copyIndexContent: {
src: ['{{SRC}}/index.html', '{{SRC}}/manifest.json', '{{SRC}}/service-worker.js'],
dest: '{{WWW}}'
},
copyFonts: {
src: ['{{ROOT}}/node_modules/ionicons/dist/fonts/**/*', '{{ROOT}}/node_modules/ionic-angular/fonts/**/*'],
dest: '{{WWW}}/assets/fonts'
},
copyPolyfills: {
src: [`{{ROOT}}/node_modules/ionic-angular/polyfills/${process.env.IONIC_POLYFILL_FILE_NAME}`],
dest: '{{BUILD}}'
},
copySwToolbox: {
src: ['{{ROOT}}/node_modules/sw-toolbox/sw-toolbox.js'],
dest: '{{BUILD}}'
},
copyVirtualScrollCore: {
src: ['{{ROOT}}/node_modules/stenciljs-virtual-scroll/dist/virtualscroll/**/*'],
dest: '{{BUILD}}/virtualscroll'
},
copyVirtualScroll: {
src: ['{{ROOT}}/node_modules/stenciljs-virtual-scroll/dist/virtualscroll.js'],
dest: '{{BUILD}}'
}
}
```
before copyVirtualScrollCore property set standart app-script copy.config properties (if you are modify self config or my version is outdated, get only last 2 properties and put in your)
3. And register component in app module
```ts
....
import 'stenciljs-virtual-scroll/dist/virtualscroll';
....
```
4. rebuild
# Usage
```html
....
{{item.index}}
{{item.title}}
loading...
....
```
OR without selector
```html
....
{{item.index}}
loading...
....
```
```ts
....
export class ExamplePage {
@ViewChild('scroll') vscroll: ElementRef;
private virtual: Array = [];
....
initVScroll() {
this.vscroll.nativeElement.addEventListener('update', (event) => {
this.virtual = event.detail;
//this.changeDetector.detectChanges(); if need
});
this.vscroll.nativeElement.addEventListener('toBottom', (event) => {
this.http.get('https://jsonplaceholder.typicode.com/photos', {}).map(res => res.json()).subscribe(data => {
this.vscroll.nativeElement.list = this.vscroll.nativeElement.list.concat(data.splice(0, 50))
if (this.vscroll.nativeElement.list.length > 200) {
this.vscroll.nativeElement.setInfinateFinally();
}
else {
this.vscroll.nativeElement.setInfinateOn();
}
//this.changeDetector.detectChanges(); if need
});
});
this.http.get('https://jsonplaceholder.typicode.com/photos', {}).map(res => res.json()).subscribe(data => {
this.vscroll.nativeElement.list = data.splice(0, 50);
//this.changeDetector.detectChanges(); if need
});
}
}
....
```
```css
virtual-scroll {
display: block;
}
```
If you need to use it without framework, watch fetch-helper component.
# API
**Selector**
In this attribute you must set selector of scrollable container (ionic application example).
If attribute is empty, component use inner scroll container.
**bottom-offset**
offset of elements to fired toBottom() event
**toBottom()**
this event is fired if scroll came to the end
**update()**
this event is fired every time when virtual scroll data is changed
**setInfinateOn()**
this method must call every time when lazy load data is finish.
If this method do not call. toBottom event never fired again
**setInfinateFinally()**
this method must call if lazy load finally and never fired toBottom() evend, and hide loader element
**clear()**
this method clear all need params of component, but not list
```ts
....
this.vscroll.nativeElement.list = [];
this.vscroll.nativeElement.clear();
//this.changeDetector.detectChanges(); if need
....
```
**scrollToNode()**
set list item index, duration, offset
```ts
....
this.vscroll.nativeElement.scrollToNode(25, 1000, -50);
....
```
**forceUpdateComponent()**
this method re-checks all dimensions, add the missing ones and force update component
```ts
....
this.vscroll.nativeElement.forceUpdateComponent();
....
```
**virtual-ratio**
add nodes after last and before first viewed nodes in viewport.
# WARN
nodes(list items) index must be different. Component set different index but if you change it, or if your list contain dublicates there may be problems.
---
_Source: https://npm.io/package/stenciljs-virtual-scroll · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._