|
4 | 4 | [](https://github.com/semantic-release/semantic-release)
|
5 | 5 | 
|
6 | 6 |
|
7 |
| -This is a [ponyfill](https://ponyfill.com) for smooth scrolling |
8 |
| -`scroll-into-view-if-needed`. |
| 7 | +This is an addon to [`scroll-into-view-if-needed`](https://www.npmjs.com/package/scroll-into-view-if-needed) that [ponyfills](https://ponyfill.com) smooth scrolling. |
| 8 | +. |
9 | 9 |
|
10 | 10 | ## [Demo](https://scroll-into-view-if-needed.netlify.com/)
|
11 | 11 |
|
12 | 12 | ## Install
|
13 | 13 |
|
14 | 14 | ```bash
|
15 |
| -yarn add smooth-scroll-into-view-if-needed |
| 15 | +yarn add smooth-scroll-into-view-if-needed scroll-into-view-if-needed |
16 | 16 | ```
|
17 | 17 |
|
18 | 18 | ## Usage
|
@@ -45,24 +45,24 @@ const sequence = async () => {
|
45 | 45 | ### Custom scrolling transition
|
46 | 46 |
|
47 | 47 | If the default smooth scrolling ponyfill isn't the duration or easing you want,
|
48 |
| -you can provide your own scrolling logic by giving `behavior` a callback. |
| 48 | +you can provide your own scrolling logic by giving `behavior` a callback (this is actually a `scroll-into-view-if-needed` feature, if this is what you're after then you might need this package). |
49 | 49 |
|
50 | 50 | ```js
|
51 | 51 | import scrollIntoView from 'smooth-scroll-into-view-if-needed'
|
52 | 52 | const node = document.getElementById('hero')
|
53 | 53 |
|
54 | 54 | scrollIntoView(node, {
|
55 | 55 | // Your scroll actions will always be an array, even if there is nothing to scroll
|
56 |
| - behavior: scrollActions => |
| 56 | + behavior: actions => |
57 | 57 | // list is sorted from innermost (closest parent to your target) to outermost (often the document.body or viewport)
|
58 |
| - scrollActions.forEach(([el, scrollTop, scrollLeft]) => { |
| 58 | + scrollActions.forEach(({ el, top, left }) => { |
59 | 59 | // implement the scroll anyway you want
|
60 |
| - el.scrollTop = scrollTop |
61 |
| - el.scrollLeft = scrollLeft |
| 60 | + el.scrollTop = top |
| 61 | + el.scrollLeft = left |
62 | 62 |
|
63 | 63 | // If you need the relative scroll coordinates, for things like window.scrollBy style logic, just do the math
|
64 |
| - const offsetTop = el.scrollTop - scrollTop |
65 |
| - const offsetLeft = el.scrollLeft - scrollLeft |
| 64 | + const offsetTop = el.scrollTop - top |
| 65 | + const offsetLeft = el.scrollLeft - left |
66 | 66 | }),
|
67 | 67 | // all the other options (scrollMode, block, inline) still work, so you don't need to reimplement them (unless you really really want to)
|
68 | 68 | })
|
|
0 commit comments