Skip to content

Fix glitching behavior on scrolling up #21

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

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