Tengo un widget de chat que saca un array de mensajes cada vez que me desplazo hacia arriba. El problema al que me enfrento ahora es que el slider se queda fijo en la parte superior cuando se cargan los mensajes, quiero que se centre en el último elemento del índice del array anterior. He descubierto que puedo hacer refs dinámicos pasando el índice, pero también necesitaría saber qué tipo de función de desplazamiento usar para conseguirlo
handleScrollToElement(event) {
const tesNode = ReactDOM.findDOMNode(this.refs.test)
if (some_logic){
//scroll to testNode
}
}
render() {
return (
<div>
<div ref="test"></div>
</div>)
}
Simplemente encuentre la posición superior del elemento que ya ha determinado https://www.w3schools.com/Jsref/prop_element_offsettop.asp y luego desplácese a esta posición mediante el método scrollTo
https://www.w3schools.com/Jsref/met_win_scrollto.asp
Algo como esto debería funcionar:
handleScrollToElement(event) {
const tesNode = ReactDOM.findDOMNode(this.refs.test)
if (some_logic){
window.scrollTo(0, tesNode.offsetTop);
}
}
render() {
return (
<div>
<div ref="test"></div>
</div>)
}
ACTUALIZACIÓN:
desde React v16.3 se prefiere el uso de React.createRef()
.
constructor(props) {
super(props);
this.myRef = React.createRef();
}
handleScrollToElement(event) {
if (<some_logic>){
window.scrollTo(0, this.myRef.current.offsetTop);
}
}
render() {
return (
<div>
<div ref={this.myRef}></div>
</div>)
}
El uso de findDOMNode va a ser obsoleto eventualmente.
El método preferido es utilizar las referencias de devolución de llamada.