He estado tratando de crear una página web con un evento de rueda de ventana para que funcione como (ref: https://www.laundrygo.com ). Como puede verificar en el sitio web de referencia, si el usuario se desplaza hacia abajo o hacia arriba, la página se mueve de forma muy natural.

Para comparar esto, utilicé 'window.addEventListner ("rueda", función), useState & UseEffect en React y boolean Flag'. Sin embargo, toma todos los eventos de la rueda (4~10 veces con un solo desplazamiento...) en un período de tiempo muy corto. Como resultado, la página se mueve hacia arriba y hacia abajo dos o cuatro veces (hacia abajo o hacia arriba) seguidas, lo cual no es lo que esperaba en absoluto... Incluso a veces se mueve hacia el lado opuesto.

Estoy agregando mi código y capturas de pantalla a continuación. Por favor revise y déme algunas ideas para resolver este problema.

Para tu información:

1. Estoy usando: React, JS.
2. Probé lodash debounce & throttle. Ninguno de ellos funcionó.
3. Tiene un total de 6 páginas, incluida la página de bienvenida y pie de página.

 const [currentPage, setCurrentPage] = useState(1); const [isLoading, setIsLoading] = useState(false); const moveDown = () => { setCurrentPage(currentPage + 1); loadingController(); }; const moveUp = () => { setCurrentPage(currentPage - 1); loadingController(); }; const loadingController = () => { setTimeout(() => { setIsLoading(false); }, 1000); } const wheelEventCaller = () => { if (!isLoading) { setIsLoading(true); window.addEventListener("wheel", (e) => { e.preventDefault(); if (e.deltaY > 500) { if (currentPage >= 6) return; moveDown(); } else if (e.deltaY < 500) { if (currentPage <= 1) return; moveUp(); } }, {passive: false}); } else { return; } }; useEffect(() => { wheelEventCaller(); }, [isLoading, currentPage]);