I’m not sure how to phrase this better, but it seems like the snapping behavior stops working after scrolling a few times. I’ve tried adding a delay or limiting the scrolling, but it seems I haven’t done it correctly. As a result, when the snapping stops, I need to scroll it to the closest div to get it snapping again. Here’s the issue I’m facing: issue is it the issue cause by the browser, my code, or the nature of it itself? let me know if its possible to fix.

and this is my code

import React from 'react'; 
import Navbar from './component/navbar';
import About from './pages/About'; 
import Work from './pages/Work'; 
import Resume from './pages/Resume'; 
import './style.css'; 

function App() {
  return (
    <div className="h-full snap-y snap-mandatory scroll-smooth overflow-scroll"> 
      <div className="snap-always snap-start flex h-full flex-col bg-black"> 
        <Navbar /> 
        <About /> 
      </div>
      <div className="snap-always snap-start h-full bg-red-700"> 
        <Work /> 
      </div>
      <div className="snap-always snap-start h-full bg-sky-800"> 
        <Resume />
      </div>
    </div>
  );
}

export default App;

I’ve tried adding a delay or limiting the scrolling, but it seems I haven’t done it correctly. As a result, when the snapping stops, I need to scroll it to the closest div to get it snapping again