Skip to content

Commit ed854f9

Browse files
v1ackv1ack
committed
Update readme
1 parent 28c3aa3 commit ed854f9

File tree

3 files changed

+61
-39
lines changed

3 files changed

+61
-39
lines changed

‎CHANGELOG.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
# svelte-virtual-scroll-list changelog
22

3+
## 1.3.0
4+
5+
- Expose `index` from VirtualScroll component
6+
37
## 1.2.0
48

59
- Move example to SvelteKit

‎README.md‎

Lines changed: 56 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -57,33 +57,33 @@ More examples available in `example` folder
5757

5858
# Comparing to other virtualizing components
5959

60-
| |svelte-virtual-scroll-list|svelte-virtual-list|svelte-tiny-virtual-list|
61-
|---|---|---|---|
62-
|handle dynamic size data|+|+|-|
63-
|scroll methods (to index)|+|-|+|
64-
|infinity scrolling|two-directional|-|one-directional with another lib|
65-
|initial scroll position|+|-|+|
66-
|sticky items|-|-|+|
67-
|top/bottom slots|+|-|+|
68-
|reached top/bottom events|+|-|-|
69-
|document as a list|+|-|-|
60+
| | svelte-virtual-scroll-list | svelte-virtual-list | svelte-tiny-virtual-list |
61+
|---------------------------|----------------------------|---------------------|----------------------------------|
62+
| handle dynamic size data | + | + | - |
63+
| scroll methods (to index) | + | - | + |
64+
| infinity scrolling | two-directional | - | one-directional with another lib |
65+
| initial scroll position | + | - | + |
66+
| sticky items | - | - | + |
67+
| top/bottom slots | + | - | + |
68+
| reached top/bottom events | + | - | - |
69+
| document as a list | + | - | - |
7070

7171
# API
7272

7373
## Props
7474

75-
|prop|type|default|description|
76-
|---|---|---|---|
77-
|data|object[]|`null`|Source for list|
78-
|key|string|`id`|Unique key for getting data from `data`|
79-
|keeps|number|`30`|Count of rendered items|
80-
|estimateSize|number|`estimateSize`|Estimate size of each item, needs for smooth scrollbar|
81-
|isHorizontal|boolean|`false`|Scroll direction|
82-
|pageMode|boolean|`false`|Let virtual list using global document to scroll through the list|
83-
|start|number|`0`|scroll position start index
84-
|offset|number|`0`|scroll position offset
85-
|topThreshold|number|`0`|The threshold to emit `top` event, attention to multiple calls.
86-
|bottomThreshold|number|`0`|The threshold to emit `bottom` event, attention to multiple calls.
75+
| prop | type | default | description |
76+
|-----------------|----------|----------------|--------------------------------------------------------------------|
77+
| data | object[] | `null` | Source for list |
78+
| key | string | `id` | Unique key for getting data from `data` |
79+
| keeps | number | `30` | Count of rendered items |
80+
| estimateSize | number | `estimateSize` | Estimate size of each item, needs for smooth scrollbar |
81+
| isHorizontal | boolean | `false` | Scroll direction |
82+
| pageMode | boolean | `false` | Let virtual list using global document to scroll through the list |
83+
| start | number | `0` | scroll position start index |
84+
| offset | number | `0` | scroll position offset |
85+
| topThreshold | number | `0` | The threshold to emit `top` event, attention to multiple calls. |
86+
| bottomThreshold | number | `0` | The threshold to emit `bottom` event, attention to multiple calls. |
8787

8888
## Methods
8989

@@ -103,22 +103,40 @@ Access to methods by component binding
103103

104104
</details>
105105

106-
|method|arguments|description|
107-
|---|---|---|
108-
|scrollToBottom|`none`|Scroll list to bottom|
109-
|scrollToIndex|`index: number`|Set scroll position to a designated index|
110-
|scrollToOffset|`offset: number`|Set scroll position to a designated offset|
111-
|getSize|`id: typeof props.key`|Get the designated item size|
112-
|getSizes|`none`|Get the total number of stored (rendered) items|
113-
|getOffset|`none`|Get current scroll offset|
114-
|getClientSize|`none`|Get wrapper element client viewport size (width or height)|
115-
|getScrollSize|`none`|Get all scroll size (scrollHeight or scrollWidth)|
116-
|updatePageModeFront|`none`|When using page mode and virtual list root element offsetTop or offsetLeft change, you need call this method manually|
106+
| method | arguments | description |
107+
|---------------------|------------------------|-----------------------------------------------------------------------------------------------------------------------|
108+
| scrollToBottom | `none` | Scroll list to bottom |
109+
| scrollToIndex | `index: number` | Set scroll position to a designated index |
110+
| scrollToOffset | `offset: number` | Set scroll position to a designated offset |
111+
| getSize | `id: typeof props.key` | Get the designated item size |
112+
| getSizes | `none` | Get the total number of stored (rendered) items |
113+
| getOffset | `none` | Get current scroll offset |
114+
| getClientSize | `none` | Get wrapper element client viewport size (width or height) |
115+
| getScrollSize | `none` | Get all scroll size (scrollHeight or scrollWidth) |
116+
| updatePageModeFront | `none` | When using page mode and virtual list root element offsetTop or offsetLeft change, you need call this method manually |
117117

118118
## Events
119119

120-
|event|description|
121-
|---|---|
122-
|scroll|Scroll event|
123-
|top|Top of the list reached|
124-
|bottom|Bottom of the list reached|
120+
| event | description |
121+
|--------|----------------------------|
122+
| scroll | Scroll event |
123+
| top | Top of the list reached |
124+
| bottom | Bottom of the list reached |
125+
126+
## Additional
127+
128+
### Get index of current rendering items
129+
130+
```html
131+
132+
<VirtualScroll
133+
data={items}
134+
key="id"
135+
let:data
136+
let:index
137+
>
138+
<div>
139+
{data.text} {index}
140+
</div>
141+
</VirtualScroll>
142+
```

‎package-lock.json‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)