Estoy tratando de crear una función de desplazamiento horizontal infinito, en la que cuando el usuario llegue al extremo derecho o al último elemento de la lista, se activará una solicitud de API y el usuario podrá desplazarse más.

Ya puedo lograr esto de alguna manera usando el controlador de eventos onTouchEnd . Sin embargo, al obtener los siguientes elementos, los agrega y luego vuelve al primer elemento. ¿Supongo que eso tiene algo que ver con volver a renderizar en reaccionar?

¿Hay quizás alguna forma mejor de manejar esto? O al menos, volver a la posición anterior a la que se desplazó el usuario. He buscado en muchas bibliotecas pero no parecen lograr lo que necesito.

Esto es lo que he hecho hasta ahora:

 import React from 'react'; import { Box, Avatar } from '@mui/material'; import { useDispatch, useSelector, } from '../../../../redux/store/configureStore'; import { nextPage, fetchAsyncMerchants, } from '../../redux/slices/deals/Merchants'; const MerchantList = () => { const dispatch = useDispatch(); const limit = 10; const { skip, merchants } = useSelector((state) => state.merchants); const boxWidthRef = React.useRef(); React.useEffect(() => { dispatch(fetchAsyncMerchants({ skip, limit })); // eslint-disable-next-line react-hooks/exhaustive-deps }, [skip]); return ( <Box sx={{ mt: '12px', mb: '16px' }}> {merchants && ( <Box ref={boxWidthRef} onTouchEnd={(event) => { dispatch(nextPage(limit)); //updates the skip counter to rerun useEffect }} onTouchStart={(event) => { console.log(event.touches[0]); }} sx={{ minHeight: '120px', boxShadow: 5, display: 'flex', justifyContent: 'space-between', borderRadius: '16px', overflow: 'auto', p: '0 5px', }} > {merchants.map((merchant) => { return ( <Box id="card-btn" key={merchant.id} sx={{ display: 'flex', flexDirection: 'column', minWidth: '100px', }} > <Avatar sx={{ height: '40px', width: '40px', mb: '4px', }} src={merchant.logo} /> </Box> ); })} </Box> )} </Box> ); }; export default MerchantList;