vimal211

I have a section called lai-main__section4-bottom which has an accordion inside it. When the section hits the viewport I want to stop the page scroll and open the accordion one by scroll and once all the accordions are closed the scroll for the entire page needs to resume. I'm using gsap scrollTrigger for it. The issue I'm facing is once the section hits the viewport the accordion open is working fine, but the entire page view is also scrolling, which is kind of overlapping. I have attached the image for that and provided my code <section> <div class="lai-main__section4-bottom"> <div class="lai-main__section4-bottom-accordion"> <div class="lai-main__section4-bottom-accordion-item active first"> <span class="lai-main__section4-bottom-accordion-header">Keeps your documents secure</span> <div class="lai-main__section4-bottom-accordion-content"> <p>jadfs.</p> </div> <div class="lai-main__section4-bottom-accordion-scrolldiv"></div> </div> <div class="lai-main__section4-bottom-accordion-item"> <span class="lai-main__section4-bottom-accordion-header">Lightning - Fast processing speed</span> <div class="lai-main__section4-bottom-accordion-content"> <p>Oosfpojs</p> </div> <div class="lai-main__section4-bottom-accordion-scrolldiv"></div> </div> <div class="lai-main__section4-bottom-accordion-item"> <span class="lai-main__section4-bottom-accordion-header">Strike up a conversation with GenAI</span> <div class="lai-main__section4-bottom-accordion-content"> <p>Osodihfwious</p> </div> <div class="lai-main__section4-bottom-accordion-scrolldiv"></div> </div> </section> <section class="lai-main__section5"> <h2> Our solution across industries </h2> </section> js code: document.addEventListener("DOMContentLoaded", (event) => { gsap.registerPlugin(ScrollTrigger); var targets = gsap.utils.toArray( ".lai-main__section4-bottom-accordion-content" ); var middleTargets = targets; var first = middleTargets.shift(); var last = middleTargets.pop(); console.log(first); console.log(middleTargets); console.log(last); gsap.set(first, { display: "block" }); const timeline = gsap.timeline({ scrollTrigger: { trigger: ".lai-main__section4", scrub: 0.3, markers: true, pin: true, }, }); timeline .to(first, { display: "none", duration: 1 }) .to(middleTargets, { display: "block", duration: 1, stagger: { each: 2, yoyo: true, repeat: 1, }, }) .to(last, { duration: 1, display: "block", }); });