Estoy trabajando en un proyecto de componentes funcionales de reacción, en el que tengo que incrementar la posición de desplazamiento mediante programación cuando un usuario realmente se desplaza en un div.
por ejemplo , tengo un div con id testDiv y un usuario se desplazó un poco hacia abajo, ahora la posición de desplazamiento es 100, por lo que quiero incrementarlo mediante programación en 1 y convertirlo en 101.
Declaración del problema: la posición de desplazamiento sigue aumentando a través del controlador onScroll , por lo que la barra de desplazamiento solo se detiene al final del elemento, incluso si nos desplazamos solo una vez.
Comportamiento esperado: el controlador onScroll debe incrementar la posición de desplazamiento solo una vez si nos desplazamos una vez en la interfaz de usuario.
Lo que probé: (código ficticio para fines de reproducción)
import React, { useCallback } from "react"; import ReactDOM from "react-dom"; const App = (props) => { const onScroll = useCallback((event) => { const section = document.querySelector('#testDiv'); // **The problem is here, scrollTop keeps on incrementing even if we scrolled only once** if (section) section.scrollTop = event.scrollTop + 1; }, []); return ( <div id="testDiv" onScroll={onScroll} style={{ height: "500px", overflowY: "scroll" }}> <div>test</div> <div className="forceOverflow" style={{height: 500 * 25}}></div> </div> ); }; ReactDOM.render(<App />, document.getElementById("root"));Lo que está buscando es acelerar o eliminar el rebote de la función. Sigue aumentando porque con cada bit de desplazamiento, se llama a onScroll .
Hay muchas formas de acelerar las funciones en reaccionar, pero me gusta usar el rebote de lodash. Si no recuerdo mal, tenía alrededor de 1,5 kb comprimidos con gzip.
Te hice un arenero . Y aquí está el código:
import React, { useCallback } from "react"; import _debounce from "lodash/debounce"; export const App = (props) => { let debouncedOnScroll = useCallback( _debounce(() => { // YOUR CODE HERE console.log("CHECK THE CONSOLE TO SEE HOW MANY TIMES IT'S GETTING CALLED"); }, 150), []); // Wait 150ms to see if I'm being called again, if I got called before 150ms, don't run me! return ( <div id="testDiv" onScroll={debouncedOnScroll} style={{ height: "500px", overflowY: "scroll" }} > <div>test</div> <div className="forceOverflow" style={{ height: 500 * 25 }}></div> </div> ); }; Por cierto, use la API useRef en lugar de document.querySelector . Este selector de consultas se llama con cada desplazamiento y no es el peso más ligero en la computadora cliente.