Scrolling an inner div with GSAP ScrollTrigger()

Question

I have just started using GSAP ScrollTrigger to add some animations to my websites, but I've come across something I'm trying to do which I can't seem to find an answer for.

I have a <section class="overflow_panels_block"> which is 100vh height and when the viewport gets to this, I'd like the website to stop scrolling and allow the <div class="panel_wrapper"> inside it to scroll down until it gets to the bottom of it's own scroll to then continue scrolling as normal.

I have included a screenshot below. The <section class="overflow_panels_block"> is the entire light background area which I'd like to prevent from scrolling when it's reached. The <div class="panel_wrapper"> Is the right side with its own scroll bar.

My HTML as follows:

<section class="overflow_panels_block">
    <div class="container">
        <div class="row">
            <div class="col-12 col-lg-6">
                <p class="subheading">project delivery</p>
                <h2 class="mt-0 large"><span class="green">delivering substantial</span> residential &amp; commercial <span>schemes.</span></h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed lectus efficitur, condimentum neque id, blandit lacus. Donec vehicula sem at dolor laoreet, finibus pretium.</p>
                <a href="#" class="box_button arrow green me-4" target="_self">scroll to see recent projects</a>
            </div>
            <div class="col-12 col-lg-5 offset-lg-1">
                <div class="panel_wrapper">
                    <div class="panel">
                        <div class="image_wrapper">
                            <div class="bg_image first_image" style="background-image: url(/assets/2024/03/Home-Interior.webp);">
                                <div class="bg_image second_image" style="background-image: url(/assets/2024/03/Vincent-Place.jpg);"></div>
                            </div>
                        </div>
                        <h3 class="arrow_right outfit">Charles Court</h3>
                        <p>Demolition of former pub to create 3 townhouses, 35 apartments for private and social housing and commercial premises.</p>
                        <p>Demolition of former pub to create 3 townhouses, 35 apartments for private and social housing and commercial premises.</p>
                        <p>Demolition of former pub to create 3 townhouses, 35 apartments for private and social housing and commercial premises.</p>
                        <p>Demolition of former pub to create 3 townhouses, 35 apartments for private and social housing and commercial premises.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

The GSAP ScrollTrigger is all installed correctly etc. I just need some help/guidance on how to configure the settings to suit my needs and therefore help me in the future.

Thanks!