Estoy usando react-elastic-carousel en mi aplicación para desplazarme verticalmente entre cuatro componentes y cada uno de ellos tiene información para mostrar cuando se desplaza por ellos. Lo que quiero hacer es que la función de desplazamiento se realice solo cuando el cursor esté en el carrusel y no en todas partes de la página, como sucede actualmente. como puedo hacer posible algun consejo? Muchas gracias.

Esto es lo que hice hasta ahora:

codesandbox.io/s/compassionate-leftpad-zzueys?file=/src/App.js

Noticias.js:

 import React, {useEffect, useRef } from "react"; import Carousel from "react-elastic-carousel"; import "./ news.css"; import { Center, Areas, Place, Others, } from "./Contents"; const News = () => { useEffect(() => { document.title = "News"; }); const prevItemObject = "prev"; const nextItemObject = "next"; const slider = useRef(null); function scroll(e) { if (slider === null) return 0; e.wheelDelta > 0 ? slider.current.onNextStart(prevItemObject, nextItemObject) : slider.current.onPrevStart(); } useEffect(() => { window.addEventListener("wheel", scroll, true); return () => { window.removeEventListener("wheel", scroll, false); }; }, []); return ( <div className="container"> <Carousel onScroll={scroll} verticalMode itemsToShow={1} enableSwipe={true} ref={slider} > <Relevant /> <SearchByAreas /> <FindAPlaceToLive /> <FindTheRightRoomie /> </Carousel> </div> ); }; export default News;

Aplicación.js:

 import React from "react"; import News from "./News"; const App = () => { return ( <div> <News /> </div> ); }; export default App;