@@ -15,7 +15,6 @@ See it in action:
15
15
` hash ` is the ` id ` of a HTML tag on current page.
16
16
17
17
18
-
19
18
## Installation
20
19
21
20
### npm
@@ -108,9 +107,9 @@ export default (props) => (
108
107
### Reactive ` props`
109
108
Update ` props` will re-render ` Scrollchor` element
110
109
111
- Ex : [updating "to" prop](https://github.com/some-react-components/react-scrollchor/blob/example/src/App.js#L28)
110
+ Example : [updating "to" prop](https://github.com/some-react-components/react-scrollchor/blob/example/src/App.js#L28)
112
111
113
- ## Custom animation
112
+ ## Custom animations
114
113
115
114
Animation behavior can be customized:
116
115
@@ -132,15 +131,15 @@ This setting is equivalent to default jQuery.animate `easing: swing`
132
131
133
132
134
133
## ` before` and ` after` Animate callbacks
135
- Use these callbacks to trigger behaviors like, for example, update state, load async stuff, etc.
134
+ Use these callbacks to trigger behaviors like: update state, load async stuff, etc.
136
135
` ` ` js
137
136
< Scrollchor to= " #aboutus" afterAnimate= {() => updateState (this )}> Home< / Scrollchor>
138
137
` ` `
139
138
140
139
## Simulate click API
141
- Scrollchor includes a dedicate API for init animate scroll programmatically that works like normal click events using ` simulateClick ()` .
140
+ Scrollchor includes a dedicate API to do animate scroll programmatically that works like normal click events using ` simulateClick ()` .
142
141
143
- Ex : [using simulateClick](https://github.com/some-react-components/react-scrollchor/blob/example/src/App.js#L17 )
142
+ Example : [using simulateClick](https://github.com/some-react-components/react-scrollchor/blob/example/src/App.js#L16 )
144
143
145
144
When used programmatically, some use-cases don't need ` anchor tags` . On these cases use childless ` Scrollchor` .
146
145
@@ -149,15 +148,22 @@ This component will render `null` and the user is reponsible for storing the com
149
148
` ` ` js
150
149
< Scrollchor ref= {ref => (this ._back = ref)} to= " _back" / >
151
150
` ` `
152
- Ex : [calling ` simulateClick ()` on childless ` ref` ](https://github.com/some-react-components/react-scrollchor/blob/example/src/App.js#L16)
151
+ Example : [calling ` simulateClick ()` on childless ` ref` ](https://github.com/some-react-components/react-scrollchor/blob/example/src/App.js#L16)
153
152
` ` ` js
154
153
_afterAnimate = () => {
155
154
this .setState ({ to: this ._iterator .next ().value });
156
155
setTimeout (() => this ._back .simulateClick (), 1000 );
157
156
};
158
157
` ` `
159
158
160
- ## Example
159
+ ## Scrollable ancestor container
160
+ Scrollchor works within any scrollable parent container. The root element of the ` document ` will be choose if none is specified.
161
+
162
+ Hosted example show how to use a different container using prop ` target` .
163
+ * Click ` Within scrollable container` checkbox: [hosted example](https://some-react-components.github.io/react-scrollchor/)(full example below)
164
+
165
+
166
+ ## Full Example
161
167
162
168
[react-scrollchor--example](https://github.com/some-react-components/react-scrollchor/tree/example)
163
169
0 commit comments