Skip to content

Conversation

@fcolacilli
Copy link

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 the defaultHeight by way of a ResizeObserver. 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:

  1. At start (when the root element's height is equal to defaultHeight and there is another height value available for the wrapper)
  2. When a resizing of the wrapper object is detected, and the value of the new height is greater than the previous one.

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant