Estoy implementando una vista de chat en React , y el comportamiento deseado es que cada vez que se ingresan nuevos datos en la dataSource de datos, la vista de chat (una lista infinita) se desplaza hacia abajo, hay muchas implementaciones, algunas se encuentran aquí: Cómo desplazarse a fondo en reaccionar? . Sin embargo, cuando trato de implementarlo, obtengo este comportamiento extraño en el que todas las vistas de la ventana se "empujan hacia arriba" fuera de la vista unos 300 px, como para acomodar este nuevo <div> que está en la parte inferior de la lista vista. Mi implementación a continuación:
import React, {useEffect, useRef} from "react"; import { createStyles, makeStyles, Theme } from "@material-ui/core/styles"; import InfiniteScroll from 'react-infinite-scroll-component'; const row_1 = 2.5; const row_chat = 4 const useStyles = makeStyles((theme: Theme) => createStyles({ container: { width: '40vw', height: `calc(100vh - 240px)`, position: 'relative', padding: theme.spacing(3), }, })); const chat_container_style = { width: '40vw', height: `calc(100vh - 240px - ${row_chat}vh - ${row_1}vh)`, } function ChatView(props) { const classes = useStyles(); const { _dataSource } = props; // scroll to bottom const messagesEndRef = useRef(null) const scrollToBottom = () => { messagesEndRef.current?.scrollIntoView({ behavior: "smooth" }) } useEffect(() => { scrollToBottom() }, [_dataSource]); return ( <div className={classes.container}> {/* chat window */} <InfiniteScroll dataLength={_dataSource.length} next={() => { return }} hasMore={true} loader={<></>} style={chat_container_style} > {_dataSource.map((item, index) => { return ( <div {...props} key={index} item={item}> {`item: ${index}`} </div> ) })} {/* putting an item here push all divs upward */} <div ref={messagesEndRef} /> </InfiniteScroll> </div> ) } Tenga en cuenta que el uso de <InfiniteScroll/> no es la causa del comportamiento. Realmente, si coloco ref={messagesEndRef} en cualquier vista, empuja todas las vistas hacia arriba en la ventana gráfica.
El problema ha sido resuelto. El origen del problema es la función scrollIntoView , está desplazando la página completa en lugar de solo listView , aquí está la función scrollIntoView correcta con los parámetros correctos:
const scrollDivRef = createRef(); useEffect(() => { scrollDivRef.current?.scrollIntoView({ block : 'nearest', inline : 'start', behavior: 'smooth', }) }, [_dataSource.length]);Así es como la referencia está anidada dentro del DOM:
<InfiniteScroll next={() => { return }} hasMore={true} loader={<></>} style={chat_container_style} dataLength={_dataSource.length} > {_dataSource.map((item, index) => ( <BubbleView {...props} key={index} item={item}/> ))} <div style={refDivStyle} ref={scrollDivRef}/> </InfiniteScroll>Este problema no tiene nada que ver con cómo diseño la hoja de estilo.