Skip to main content
3 de 3
título editado

¿Como desplazar el scroll para que sea visible el nuevo item en una lista utilizando React JSX Typescript?

Estoy desarrollando una chat y quiero que los mensajes nuevos se visible para eso ocupo que el scroll vertical se desplaze automáticamente cuando se agrega el nuevo mensaje

  
  
   private scroll: React.RefObject<HTMLDivElement>;
  
  
  componentDidMount() {
    //window.scrollTo(0,0);
    //ReactDOM.findDOMNode(this).scrollIntoView();
    this.scroll.current.scrollIntoView({ block: 'end', behavior: 'smooth', inline: "nearest" });
  }
  
  render(){
  return(
   <div  ref={this.scroll} key={Keys}  className=" He  row">
                        <div className=" col">
                          <div className="Cuerpo">
                            <div className=" row">
                              <label className="User">{items.usuario}</label>
                            </div>
                            <div className=" Mensaje row">
                              <p className="pa">{items.mensaje}</p>
                            </div>
                            <div className="  row">
                              <div className="col Fecha">{items.fecha}</div>
                            </div>
                          </div>
                        </div>
                      </div>
  )
  }