Skip to main content
título editado
Enlace

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

se añadieron 1324 caracteres en el cuerpo
Origen Enlace

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>
  )
  }

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

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>
  )
  }

Origen Enlace

¿Como desplazar el scroll para que sea visible el nuevo item en una lista utilizando Reac 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