Fix glitching behavior on scrolling up #21
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Tried to find a solution to the behavior described in #20.
I think it happened because, when scrolling from below into an element with a height greater than
defaultHeight
, the appearance of the rendered children elements forced a scroll down which left those same elements out of intersection, therefore triggering their disappearance and re-rendering the placeholder element.The solution for this was to create a
div
element inside the root, wrapping both the children and the placeholder elements, in order to track its height independently of thedefaultHeight
by way of aResizeObserver
. This tracked height is then saved into a state variable and passed to the root element (instead of the placeholder) in order to permanently keep its size controlled (so that it's not resized on intersection -which caused the glitching-, but only the children elements are made to appear inside).The setting of the state variable happens in 2 cases:
defaultHeight
and there is another height value available for the wrapper)The last case works for children with fixed height (therefore the rationale for storing the greatest height detected), but in case they could need to be resized to smaller heights, this point would need to be reviewed.