malerba118 / scrollex

Build beautiful scroll experiences using minimal code

Home Page:https://scrollex-docs.vercel.app/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Calculation of maxScrollPosition

malerba118 opened this issue · comments

At the moment, the calculation of maxScrollPosition is making some major assumptions about the children of Scroll.Container.

The calculation assumes that children of Scroll.Container will strictly be Scroll.Section's however there's nothing at the moment that actually enforces all children of Scroll.Container to be Scroll.Section's.

I see two potential fixes for this:

Solution 1: Somehow enforce that all children of Scroll.Container should be Scroll.Section's

At first i thought this could be done with something like React.Children.map(children, (child) => child.type === Scroll.Section), but then i realized hoc's like const ScrollSection = chakra(Scroll.Section) would be problematic since this would no longer be true and they would be omitted. Now i'm experimenting with some sort of bomb that would be disarmed by a Scroll.Section. Each child would have a 'bomb' tied to it and if the child failed to disarm the bomb then the container would throw an error.

Solution 2: Introduce a wrapper div around the Scroll.Container's content and attach a resize observer to it

This would remove the need for all children of the container to be sections. Could then monitor the height of the wrapper div and then the maxScrollPosition would be wrapper.offsetHeight - container.offsetHeight.

Definitely leaning toward solution 2.

Have a new implementation for this:

https://github.com/malerba118/scrollex/blob/fix-max-scroll-pos-calculation/src/hooks/useScrollLayoutManager.ts#L79

Just need to test it out a bit more and then i'll publish it along with v2