Untitled

import React, { useRef, useEffect } from 'react';
import { gsap } from 'gsap';
import { ScrollToPlugin } from 'gsap/ScrollToPlugin';

gsap.registerPlugin(ScrollToPlugin);

const ScrollingComponent = () => {
  const section2 = useRef();
  const section3 = useRef();
  const section4 = useRef();

  useEffect(() => {
    const handleScroll = (e) => {
      if (e.deltaY > 0) {
        gsap.to(window, { scrollTo: { y: section2.current.offsetTop, autoKill: false }, duration: 1 });
      }
    };

    section2.current.addEventListener('wheel', handleScroll);
    section3.current.addEventListener('wheel', handleScroll);
    section4.current.addEventListener('wheel', handleScroll);

    return () => {
      section2.current.removeEventListener('wheel', handleScroll);
      section3.current.removeEventListener('wheel', handleScroll);
      section4.current.removeEventListener('wheel', handleScroll);
    };
  }, []);

  return (
    <div className="h-full w-full overflow-hidden">
      <header className="h-screen w-screen bg-blue-500">Header</header>
      <section ref={section2} className="h-screen w-screen bg-red-500 overflow-x-scroll whitespace-nowrap">
        {/* Add content for horizontal scroll here */}
        <div className="inline-block w-screen h-full bg-red-300">Content 2.1</div>
        <div className="inline-block w-screen h-full bg-red-400">Content 2.2</div>
        <div className="inline-block w-screen h-full bg-red-500">Content 2.3</div>
      </section>
      <section ref={section3} className="h-screen w-screen bg-yellow-500 overflow-x-scroll whitespace-nowrap">
        {/* Add content for horizontal scroll here */}
        <div className="inline-block w-screen h-full bg-yellow-300">Content 3.1</div>
        <div className="inline-block w-screen h-full bg-yellow-400">Content 3.2</div>
        <div className="inline-block w-screen h-full bg-yellow-500">Content 3.3</div>
      </section>
      <section ref={section4} className="h-screen w-screen bg-green-500 overflow-x-scroll whitespace-nowrap">
        {/* Add content for horizontal scroll here */}
        <div className="inline-block w-screen h-full bg-green-300">Content 4.1</div>
        <div className="inline-block w-screen h-full bg-green-400">Content 4.2</div>
        <div className="inline-block w-screen h-full bg-green-500">Content 4.3</div>
      </section>
      <footer className="h-screen w-screen bg-purple-500">Footer</footer>
    </div>
  );
};

export default ScrollingComponent;