Tengo varios divs y necesito, cuando me desplazo hacia abajo, se desplaza al siguiente div, y cuando se desplaza hacia arriba, se desplaza al div anterior.

Hay una pregunta relacionada con esto ( Javascript: ¿desplazarse de un div a otro al desplazarse? ) usando JavaScript y jQuery, donde tiene un ejemplo en Fiddle, sin embargo, no puedo implementar ese ejemplo en React .

Ejemplo de violín : http://jsfiddle.net/r3x7r/410/

Esto es lo que tengo hasta ahora:

 import { Image } from "react-bootstrap"; import { useEffect, useRef } from "react"; import "./styles.css"; export default function App() { const div1 = useRef(null); const div2 = useRef(null); const executeScroll = () => { if (div2.current) div2.current.scrollIntoView(); }; useEffect(() => { const threshold = 0; let lastScrollY = window.pageYOffset; let ticking = false; const updateScrollDir = () => { const scrollY = window.pageYOffset; if (Math.abs(scrollY - lastScrollY) < threshold) { ticking = false; return; } // check scrolling is down if (scrollY > lastScrollY) { if (div1.current && div2.current) { if (scrollY >= 0 && scrollY <= div1.current.clientHeight) { executeScroll(); } } } lastScrollY = scrollY > 0 ? scrollY : 0; ticking = false; }; const onScroll = () => { if (!ticking) { window.requestAnimationFrame(updateScrollDir); ticking = true; } }; window.addEventListener("scroll", onScroll); return () => { window.removeEventListener("scroll", onScroll); }; }); return ( <> <div ref={div1}> <Image className="div1-media d-block" src="https://picsum.photos/800/600?random=2" /> </div> <div ref={div2}> <Image className="div2-media d-block" src="https://picsum.photos/800/600?random=4" /> </div> </> ); }

 .App { font-family: sans-serif; text-align: center; } .div1-media, .div2-media { object-fit: cover; width: 100%; height: 100%; }

Demostración en CodeSandBox : https://codesandbox.io/s/scrolls-to-next-element-on-scrolling-element-forked-zswfw