Eu tenho um widget de chat que puxa uma série de mensagens cada vez que eu rolo para cima. O problema que estou enfrentando agora é que o controle deslizante permanece fixo no topo quando as mensagens são carregadas, eu quero que ele se concentre no último elemento de índice do array anterior. Descobri que posso fazer refs dinâmicos passando índice, mas também precisaria saber que tipo de função de rolagem usar para conseguir isso
handleScrollToElement(event) {
const tesNode = ReactDOM.findDOMNode(this.refs.test)
if (some_logic){
//scroll to testNode
}
}
render() {
return (
<div>
<div ref="test"></div>
</div>)
}
Basta encontrar a posição superior do elemento que você'já determinou https://www.w3schools.com/Jsref/prop_element_offsettop.asp e depois rolar para esta posição através do método scrollTo
https://www.w3schools.com/Jsref/met_win_scrollto.asp
Algo assim deve 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>)
}
UPDATE:
desde React v16.3 o React.createRef()
é preferido
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>)
}
O uso do findDOMNode vai ser eventualmente depreciado.
O método preferido é o uso de refs de retorno.