Skip to content

Commit

Permalink
docs(readme): add note for smooth scrolling example
Browse files Browse the repository at this point in the history
  • Loading branch information
wellyshen committed Jun 14, 2021
1 parent e59ac9d commit c8e3a42
Show file tree
Hide file tree
Showing 2 changed files with 9 additions and 2 deletions.
5 changes: 5 additions & 0 deletions .changeset/nasty-mugs-call.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"react-cool-virtual": patch
---

docs(readme): add note for smooth scrolling example
6 changes: 4 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -234,7 +234,7 @@ const List = () => {
};
```

> 馃挕 Scrollbar thumb is jumping? It's because the total size of the items is gradually corrected along with an item has been measured. You can tweak the `itemSize` to reduce the phenomenon.
> 馃挕 The scrollbar is jumping? It's because the total size of the items is gradually corrected along with an item has been measured. You can tweak the `itemSize` to reduce the phenomenon.
### Real-time Resize

Expand Down Expand Up @@ -361,7 +361,7 @@ const List = () => {
};
```

> 馃挕 Scrollbars disappear when using Chrome in Mac? If you encounter [this issue](https://bugs.chromium.org/p/chromium/issues/detail?id=1033712), you can add `will-change:transform` to the outer element to workaround this problem.
> 馃挕 The scrollbar disappears when using Chrome in Mac? If you encounter [this issue](https://bugs.chromium.org/p/chromium/issues/detail?id=1033712), you can add `will-change:transform` to the outer element to workaround this problem.
### Scroll to Offset/Items

Expand Down Expand Up @@ -408,6 +408,8 @@ const scrollToOffset = () => scrollTo({ offset: 500, smooth: true });
const scrollToItem = () => scrollToItem({ index: 10, smooth: true });
```

> 馃挕 When working with [dynamic size](#dynamic-size), the scroll position will be automatically corrected along with the items are measured. To optimize it, we can provide an estimated item size to the [itemSize](#itemsize) option.
The default easing effect is [easeInOutSine](https://easings.net/#easeInOutSine), and the duration is `100ms <= distance * 0.075 <= 500ms`. You can easily customize your own effect as follows:

```js
Expand Down

0 comments on commit c8e3a42

Please sign in to comment.