Untitled
unknown
plain_text
7 months ago
2.5 kB
1
Indexable
Never
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;