Add onProgress to track the scroll progress between enter / leave #304
Conversation
fix bug in progress calculation make progress 0 through 1 fix progress to 2 digits rm fixed decimal place for current scroll progress; allow more precision update progress to only call callback when current step within viewport bump version to 9.0.6; make progress callable only when inside revert changes to package.json chore: please the linter chore: please the linter again
TN1ck
changed the title
| @@ -211,12 +209,25 @@ export class Waypoint extends React.PureComponent { | |||
| viewportTop: bounds.viewportTop, | |||
| viewportBottom: bounds.viewportBottom, | |||
| }; | |||
|
|
|||
| if (currentPosition === INSIDE) { | |||
There was a problem hiding this comment.
Nit: can this be combined with the same if-statement a few lines down on 225?
There was a problem hiding this comment.
I tried it out and it needs to be done before the previousPosition === currentPosition check, as these are then "inside" and "inside" and thus the onProgress wouldn't be called.
| onProgress.call(this, Object.assign({}, callbackArg, { progress })); | ||
| } | ||
|
|
||
| if (previousPosition === currentPosition) { |
There was a problem hiding this comment.
Any reason not to make this check happen first?
There was a problem hiding this comment.
Unfortunately not, as inside === inside is always true and breaks the onProgress logic to fire an event on every scroll.
|
This PR is really helpful. |
|
cc @trotzig |
|
While I think the work @TN1ck did here is good, I feel like this library isn't the right tool for the job. I would recommend looking into Intersection Observer for fine-grained scrolling control like the one described here. |
Hey all,
this PR adds a really useful feature to react-waypoint. An
onProgresshandler.This is useful when one wants to animate something regarding the scroll position, imagine for example a progress indicator how far you've read the page or similar.
I did not write the logic here myself, but used https://github.com/davidkofahl/react-waypoint-with-progress/commits/master as base and fixed it up a bit so a PR could be made.
I created a test page here: https://waypoints-on-progress.netlify.com/, the code for it can be found in this branch: https://github.com/TN1ck/react-waypoint-with-progress/tree/progress-test-page
I added some docs, typescript definitions and more.
There should be no performance hit, the only thing that was added on every scroll are some simple math calculations.
If there is something I can add to improve this PR, please tell me!