How to implement internal scrolling of content in React while scrolling the entire page

Question

I want to create a logic in React that scrolls the child content first when the full page is scrolled. Once the sub content is fully scrolled it will move to the next section

For example: I have three parts: A, B and C. The height of each section is 100vh. Section B consists of four subsections: B1, B2, B3 and B4, all of which are also 100vh in height.

When scrolling the page, once you scroll to section B, its subsections will start scrolling. Once the subsection is fully scrolled, the scrolling will move to Section C

I have implemented it using GSAP library but I want to implement it using only React.

Answer 1

This question is answered here. You can create a hook and use it as mentioned in the stack overflow thread.