How can I create a scrollable content inside a 100vh section that scrolls without scrolling the main section until the scrollable content is over

I want to recreate something like the about section of this amazing portfolio: https://www.david-hckh.com/

There in the about section the section appears to be 100vh and has a side content with about info that scrolls in the main scroll and when it is over then the section scrolls and continues with the rest of the sections.

I believe, but I'm not sure, that he is using ScrollControls from react three drei but with that wrapper we can't have pages that have a height greater than 100vh so I want to implement something like what he did in my react app.

I tried setting the min-height to 100vh and for that specific section that is longer than 100vh create an overflow scroll but it doesn't do anything.

Unless you really need all the extra bells and whistles of that site, the basic effect is actually easy to achieve with just CSS using position: sticky;. What you want is to have a section that scrolls naturally and is taller than the viewport, with some element that becomes "stuck" to the page while that section is in view. You have 3 elements:

• A: A container
• B: The content you want to scroll
• C: The content you want to appear fixed

In the example site you gave, A is the section, B is the stats/content on the left, and C is the background render of David.

You want your container (A) to naturally be the height of the content (B), but no smaller than the viewport height:

.container-class {
    position: relative; /* needs to be set for `position: sticky;` of child to work */
    min-height: 100vh;  /* or dvh/svh/lvh */
}

For the "fixed" content (C), use sticky positioning and whatever other styles you need to place it correctly.

.fixed-class {
    position: sticky;

    /* Needs to have at least a top or bottom value for sticky to work */
    top: 0;
}