in my nextjs 13.1 website using the new app directory and tailwind css, I have the snap effect on each section of my SPA, with my current code, the snap works, but i then get a second vertical scrollbar. if i remove overflow-y-scroll and put in overflow-y-hidden, of course this does remove the second scrollbar, but then my snap doesnt work. I have tried auto, but cant seem to only have 1 vertical scrollbar with the snap effect. Here is my page.jsx code:
`export default function Home() { return ( {/* Header in Layout /} {/ Header */}
{/* Hero */}
<section id="hero" className="snap-start">
<Hero />
</section>
{/* About*/}
<section id="about" className="snap-center">
<About />
</section>
{/* Work Experience */}
<section id="freelance" className="snap-center">
<FreelanceWork />
</section>
{/* Practice Projects */}
<section id="projects" className="snap-start">
<PracticeProjects />
</section>
{/* Skills */}
<section id="skills" className="snap-start">
<Skills />
</section>
{/* Contact Me */}
<section id="contact" className="snap-center">
<ContactMe />
</section>
</div>
); }`
and if it helps, as an example in every component, generally speaking i have a div wrapping every component with this: <div className=" h-screen flex flex-col relative mx-auto text-center items-center md:text-left md:flex-row max-w-7xl px-10 justify-center">
so not sure if i have to add something to each div to make this work. Thanks!
i tried playing around with different overflows but i couldnt get it to work without losing snap effect
