0

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

1
  • 1
    Agrega el código que has hecho, da más detalles. Saludos Commented el 17 jul. 2019 a las 22:48

2 respuestas 2

2

Te marca error por que el compilador de typescript detecta que la variable puede contener null para solucionar eso tiene que usar un if por ejemplo

` private miScroll: React.RefObject<HTMLDivElement>=React.createRef();  

componentDidUpdate() {

  const node=this.miScroll.current
  if(node){
     node.scrollIntoView({ block: 'end', behavior: 'smooth', inline: "nearest" });
    }

  }`
1
  • 1
    Gracias funciono perfectamente
    – jesus jose
    Commented el 18 jul. 2019 a las 16:32
0

Cuando haga la acción de implementar un nuevo elemento agrega justo esto después que hará que baje instantáneamente hacia abajo

var elem=document.getElementById("myDIV");
elem.scrollTo(0,(elem.scrollHeight - elem.offsetHeight));
1
  • Typescript marca error (local var) elem: any Subsequent variable declarations must have the same type. Variable 'elem' must be of type 'any', but here has type 'HTMLElement | null'.ts(2403) ChatHome.tsx(100, 9): 'elem' was also declared here.
    – jesus jose
    Commented el 18 jul. 2019 a las 14:49

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.