Her yukarı kaydırdığımda bir dizi mesajı çeken bir sohbet widget'ım var. Şu anda karşılaştığım sorun, mesajlar yüklendiğinde kaydırıcı üstte sabit kalıyor, önceki diziden son dizin öğesine odaklanmasını istiyorum. İndeksi geçerek dinamik refs yapabileceğimi anladım, ancak bunu başarmak için ne tür bir kaydırma işlevi kullanacağımı da bilmem gerekiyor
handleScrollToElement(event) {
const tesNode = ReactDOM.findDOMNode(this.refs.test)
if (some_logic){
//scroll to testNode
}
}
render() {
return (
<div>
<div ref="test"></div>
</div>)
}
Daha önce belirlediğiniz öğenin en üst konumunu bulun https://www.w3schools.com/Jsref/prop_element_offsettop.asp ve ardından `scrollTo' yöntemiyle bu konuma kaydırın https://www.w3schools.com/Jsref/met_win_scrollto.asp
Bunun gibi bir şey işe yaramalı:
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>)
}
GÜNCELLEME:
React v16.3*** sürümünden beri React.createRef()
tercih edilmektedir
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>)
}
findDOMNode kullanımı eninde sonunda kullanımdan kaldırılacaktır.
Tercih edilen yöntem geri arama reflerini kullanmaktır.
ComponentDidUpdate` gibi bir şey kullanabilirsiniz
componentDidUpdate() {
var elem = testNode //your ref to the element say testNode in your case;
elem.scrollTop = elem.scrollHeight;
};